WebKit에서이 텍스트를 제대로 다시 그려 내지 않는 이유는 무엇입니까?

WebKit 렌더러와 관련하여 매우 구체적인 문제가 있습니다. 텍스트 노드에 텍스트 노드의 선택 상자를 넘어 확장되는 디 센더 또는 오름차순이 있고 그 텍스트 노드가 위치를 변경하면 WebKit은 오른쪽 영역을 다시 칠하지 않습니다. 윈도우 7에서 크롬에서 WebKit에서이 텍스트를 제대로 다시 그려 내지 않는 이유는 무엇입니까?

I've made an example with Open Sans.

는 J에 센더는 애니메이션 동안 차단됩니다. 텍스트 노드에 여백을 추가하여 문제를 해결할 수는 있지만 해킹과 레이아웃이 맞지 않습니다. 다른 브라우저에서 누구도 이것을 볼 수 있습니까? 왜 그런가?

출처

2012-10-25 Anonymous

이것은 Webkit의 버그처럼 보입니다. 당신은 웹킷은 당신이 몇 가지 방법으로 할 수는 경계 상자 넘어 픽셀이 그린 것 알려해야하지만 여기에 내가 몇 가지 빠른 테스트에서 발견 한 두 가지 :

#expand { 
    height: 0px; 
    box-shadow: 0 0 0 5px rgba(0,0,0,0); 
} 

#expand { 
    height: 0px; 
    outline: solid transparent 5px; 
}

나는 짐작을 outline의 성능이 더 좋습니다.

#expand 또는 p도 추가하면 작동하는 것 같습니다. Chrome에는 표시 영역을 사용하는 방법을 표시 할 수있는 플래그가 있지만 지금 당장은 편리하지 않습니다.

출처

2012-10-25 21:12:12 Duopixel

개요 솔루션은 좋은 생각입니다. 채우기 또는 여백과 같은 레이아웃에는 영향을 미치지 않지만 다시 그리기 영역을 강제로 늘립니다. 좋은! –

나는 #container p 규칙에 padding-left: 5px;을 던졌고 J는 상자 밖에있었습니다.

희망이 있습니다.

* 편집 덧붙여 말하면, 패딩이 레이아웃에 엉망이되는지 확실하지 않습니다.

출처

2012-10-25 20:05:14 Rchristiani

그래, 패딩 및 여백 수정 프로그램을 찾았습니다. 대부분의 경우 작동합니다. 나는 왜 이런 일이 일어나고 있는지 그리고 거기에 일반적인 해결책이 있는지 궁금해. –

@atonparker 그것을 살펴본 후, # 컨테이너의 너비가 100 %이고 그 위에 패딩을 두는 것이 보입니다. 실제로 컨테이너를 100 %보다 크게 만듭니다. [Box Model] (http://css-tricks.com/the-css-box-model/)은 width + padding-left + padding-right + border-left + border-right를 취합니다. 가능한 원인으로 고려해야 할 부분 일 수 있습니다. – Rchristiani

컨테이너를 고정 너비로 변경했습니다. 패딩은 J의 디 센더가 표시되도록하는 것입니다. 근본적인 문제는 디 센더가 텍스트 노드의 계산 된 너비를 초과한다는 것입니다 (텍스트를 선택하여보십시오). WebKit을 전체 컨테이너에 다시 칠하는 솔루션을 찾고 있습니다. –

WebKit에서이 텍스트를 제대로 다시 그려 내지 않는 이유는 무엇입니까?

답변

관련 문제