WebKit: Blurry text with css scale + translate3d

css webkit scale blurry translate3d
phil picture phil · Nov 6, 2011 · Viewed 90.3k times · Source

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.

Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)

Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.

Answer

methodofaction picture methodofaction · Nov 7, 2011

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here: http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.

Related questions

How to force re-render after a WebKit 3D transform in Safari

I'm using CSS 3D transformations to zoom a div, for example: -webkit-transform: scale3d(2,2,1); The scaling itself works fine in any WebKit browser. However, when using this on Safari (mobile or Windows), the content of the div is not re-rendered. …

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More