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