CSS-Rotated text in Webkit browsers is blurred -


i've come across severe problem can't solve..

i created accordion element jquery plugin easyaccordion.js. while developing , looked on in firefox worked - until openend in chrome. there can see rotated text unclear , blurred, though has same formatting un-rotated text @ top. same safari.

i created jsfiddle sortof recreates issue (look @ in chrome or safari)

.

..

http://jsfiddle.net/sfkkv/427/

..

.

this i'm using rotate text:

  -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); 

the jsfiddle not working in firefox, that's not important here, have working on website created in, sortof broken fiddle in firefox shows can display rotated text lot better.

i've found hints towards font-smoothing , 3d parameters, none seemed work me.

can me issue?

i believe has way chrome rendering transform. best way see i'm going talk going chrome://flags/ , enabling composited render layer borders. now, go fiddle fix posted. you'll notice orange border around several elements on page. border there because shows these elements given own layer when being rendered on page.

start tweaking widths of dt elements in <dl class="easy-accordion"> using chrome inspector tool. text become blurry/clear depending on whether width even/odd. appears happening here layer being composited half-pixel location being rendered create appearance of being "between" 2 pixels.

this issue safari (and webkit in general).

check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome more info.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -