Chrome/webkit + CSS rotate

[grimski]

I’m encountering a couple of problems with CSS rotated divs, mainly in Chrome and involving blurred text. I’ll hold off on posting a CodePen as there’s so much to take into consideration it would almost be a full webpage. If needed, I’ll upload my HTML templates somewhere.

The layout of my page uses alternating rotated divs to give a slanted effect. A parent div rotated 2 degrees and the .inner div rotated the opposite, -2 degrees, so the content is horizontal again.

The works really all cross-browser, except for Chrome (and Safari but I’ll get to that separate issue) where the text is slightly blurred. Still seems to be a pretty common issue and I wondered if anyone had a fix for it?

I’ve read up on a few fixes but none of them seem to work explicitly. I tried using translate3d…

.slant {
    -webkit-transform: rotate(-2deg) translate3d(0, 0, 0);
}

.slant .inner {
    -webkit-transform: rotate(2deg) translate3d(0, 0, 0);
}

But that seemed to do very little. Then I tried transform-origin…

.slant {
    -webkit-transform-origin: 50% 53%;
}

On the face of it, this worked a treat! But then I looked at another page and text was blurred again I declared the same CSS above for the .inner div, which seemed to work …but then I checked another page which previously looked ok and it had made the text blurry on that!

I’m guessing this relates to the content that’s within each div, which I don’t have control over. It could be any length. On one page, the only difference is a button is in the first .slant, which makes the text in the following .slant blurred. If I copy and paste the first .slant from another page without blurred text over the top – it works!?

Does anyone know any more ‘known’ fixes for this? Or do we just have to except this will happen from time to time in Chrome at the minute?

The issue in Safari is the edges of the div are sharp and jagged, this only occurs on the top of the rotated div – any ideas on that too?

It’s worth noting the first .slant is rotated a little bit more but if I set it to the same as the rest of the divs, I get the same issue.

Thanks, sorry for the long post. Hope someone can at least give me a few more things to try!

[grimski]

Even though the approach I’ve just took didn’t work when I first encountered the issue, it seems to be working (better) now. Maybe a browser update has improved the issue, I dunno.

I’ve removed every instance of translate3d(0,0,0) within the transforms, just leaving transform: rotate(value);

Also set -webkit-transform-origin: 50% 51%; only on .slant, nothing else and -webkit-font-smoothing: antialiased; onto the container div that groups it all together.

Even though the things I’ve just removed were meant to help the sharpness of the text it looks like they’ve caused further issues – even though when I first put them in they did very little, if not nothing, so I just left them in.

A slightly different issue

I’ve noticed a different but I’m assuming linked issue on the page. The rotated divs generally speaking display pretty well and edges are pretty ‘sharp’. But as a border is also set I’ve noticed the background-color occasionally bleeds out from behind the border. As border-top: 10px solid black is set, this only occurs on the top edge of the div. And is only really noticeable on the divs with dark grey background colours.

I tried setting;

-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

But this seems to just move the ‘rough’ edge to the bottom edge of the div. I also tried;

-webkit-backface-visibility: hidden;

Instead, which looked like it works a treat …but unfortunately it caused the original issue of blurring text – AAAARRRGH haha!

To be honest I think I’m just going to leave both these fixes off and settle for a slightly jagged edge occasionally – unless anyone has any ideas?

Thanks again and sorry for the original ridiculously long post. I’m not sure it helped at all.

[Author]

Posts