Blurry Text on Transform:Rotate in Chrome

Blurred text *during* css transform - Chrome

This is due to using the CSS transform property.
Using it blurs the element for a better transition i'd suggest transforming the width and height of you're box instead of using the transform property.

Blurry text when rotating with webkit-transform in Chrome

It's resolved!

The problem wasn't Google Chrome, but the LayerSlider.
With z-index and position absolute I resolved this problem.

CSS-Rotated text in Webkit browsers is blurred

I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.

Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.

This is also the issue with Safari (and WebKit in general).

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

Blurry font after applying transform

scale was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.

Additionally, removing perspective from transformation yielded crisp text and images.

---

Related Topics