CSS-회전 된 텍스트는 <p></p>는 내가 jQuery를 플러그인 easyAccordion.js와 아코디언 요소를 생성 ..

Question

내가 해결할 수없는 심각한 문제가 건너했습니다 흐리게한다. 파이어 폭스에서 개발하고 보았을 때 크롬에서 openend 할 때까지 잘 작동했다. 회전 된 텍스트가 맨 위에 회전되지 않은 텍스트와 동일한 서식을 가지고 있더라도 회전 된 텍스트가 명확하지 않고 분명히 흐려져 있음을 볼 수 있습니다. 사파리와 동일합니다.

나는 바콜

(크롬 또는 사파리에 봐) 내 문제를 재현 jsfiddle을 만들었습니다.

.. http://jsfiddle.net/SfKKv/427/

..

.

이 내가 텍스트 회전 사용하고 무엇을 :

-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(-90deg); /* Firefox 3.5-15 */ 
     -ms-transform: rotate(-90deg); /* IE 9 */ 
     -o-transform: rotate(-90deg); /* Opera 10.50-12.00 */ 
      transform: rotate(-90deg); 

JSFiddle 완전히 파이어 폭스에서 작동하지 않는,하지만 여기에 중요하지, 나는 그것이 내가 그것을 만든 웹 사이트에 작업이 그러나 FIrefox의 깨진 Fiddle조차도 회전 된 텍스트를 더 잘 표시 할 수 있다는 것을 보여줍니다.

글꼴 다듬기와 일부 3D 매개 변수에 대한 힌트를 찾았지만 아무 것도 저에게 효과가없는 것 같습니다.

누구든지이 문제를 해결할 수 있습니까?

Answer 1

저는 이것이 Chrome이 변환을 렌더링하는 방식과 관련이 있다고 생각합니다. 내가 이야기 할 내용을 확인하는 가장 좋은 방법은 chrome://flags/으로 이동하여 Composited render layer borders을 사용하는 것입니다.이제 게시 한 fiddle with a fix으로 이동하십시오. 페이지의 여러 요소 주위에 주황색 테두리가 표시됩니다. 이 테두리는 페이지에 렌더링 될 때 이러한 요소가 자체 레이어가 제공된다는 것을 보여주기 때문에 존재합니다.

크롬 검사기 도구를 사용하여 <dl class="easy-accordion">에있는 dt 요소의 너비를 미세 조정하기 시작합니다. 너비가 짝수/홀수인지 여부에 따라 텍스트가 흐리거나 흐려집니다. 여기서 일어나는 현상은 레이어가 두 픽셀 사이의 "중간"모양을 만들기 위해 렌더링되는 절반 픽셀 위치로 합성되는 것입니다.

이것은 Safari (및 WebKit 일반적으로)의 문제이기도합니다.

자세한 내용은 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome을 확인하십시오.

Answer 2

일반적으로 100 % 정확하지는 않지만 정확하지만 충분히 만족스럽지 않은 수정본을 발견했습니다.

업데이트 된 JS Fiddle이 다시 Chrome 또는 Safari에서 사용됩니다. 빨간색 호버 상자를 사용하여 작동중인 마법을 확인하십시오.

http://jsfiddle.net/SfKKv/627/

내가 할 모든 가까운 뭔가 기본값 (50 % 50 %)에서 -webkit-변환 - 원점을 변경입니다 충분히 그런 당신이 바이올린을하려고하면

-webkit-transform-origin: 50% 51%; 

로 , 당신은 그것이 1 퍼센트만큼 움직이는 것을 볼 수 있습니다. 그러나 흐리게 표시된 텍스트보다 여전히 좋습니다.

나는이 내용을 순수한 시행 착오로 발견했으며, 왜 갑자기 텍스트가 갑자기 선명하게되었는지 알지 못합니다. 누군가이 행동을 설명 할 수 있다면 알려주세요!

Answer 3

이 문제는 배경색이 IE 버전 8, 9, 크롬 어쩌면 일부 버전에 대해 정의되지 않은 경우

추가 배경 색상 (나는이 크롬에서 문제를 보지 않았다) 발생 : 흰색; (또는 원하는 색상)을 css rotate 클래스에 추가하면 문제가 해결됩니다.

-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */ 
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */ 
    -ms-transform: rotate(-90deg); /* IE 9 */ 
    -o-transform: rotate(-90deg); /* Opera 10.50-12.00 */ 
     transform: rotate(-90deg); 
background-color: white;   /* fix blurry text in ie8, 9 */ 

Answer 4

나는 비슷한 문제가 있었는데, 문제는 원근감이 body이고 회전 된 div가 있습니다. Mac의 Safari에서만 발생했습니다. Chrome은 정상적으로 작동했습니다. body에서 perspective을 제거

는

body { 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    font-family: 'Varela Round', sans-serif, Helvetica; 
    transform-style: preserve-3d;//bad 
    perspective: 1200px;//bad 
    -webkit-text-size-adjust: none 
} 

저를 저장! 참으로 나는 두 번이라는 시각을 사용했고, 다른 회전 된 div에서도 픽셀을 죽이기 힘들게 만들었습니다. 심지어 SVG와 텍스트도 픽셀 화되었습니다.

transform-style: preserve-3d; 
perspective: 1200px; 

위의 스타일을 삭제 한 바디에서 제거하십시오.