Css rotated text is jaggy

Question

Any ideas how to get css rotated text to render properly in Chrome? In Firefox it looks acceptable.

Removing the shadow don't fix the problem and I have also tried to adjust the transition-origin without luck.

On high resolution screens it also looks just fine.

 .discount-trap {
   border-bottom: 33px solid #74c331;
   border-left: 33px solid transparent;
   border-right: 33px solid transparent;
   height: 0px;
   width: 150px;
   -webkit-transform: rotate(-315deg);
   -moz-transform: rotate(-315deg);
   -ms-transform: rotate(-315deg);
   -o-transform: rotate(-315deg);
   transform: rotate(-315deg);
   text-align: center;
   position: absolute;
   top: 25px;
   color: white;
   text-shadow: 0px 1px 2px black;
 }
 .discount-trap__header {
   font-size: 14px;
   margin-top: 2px;
 }
 .discount-trap__text {
   font-size: 10px;
 }

<div style="position: relative;">
  <div class="discount-trap" style="display: block;">
    <div class="discount-trap__header">Save 15%</div>
    <div class="discount-trap__text">Stay in Jul/Aug</div>
  </div>
</div>

Fiddle

Update:

It looks like multiple options works, none of them make it as smooth as Firefox but that is properly a Chrome issue. Option 1: Add to .discount-trap -webkit-backface-visibility: hidden;

Option 2: Add to -webkit-transform: rotate(-315deg); so it becomes -webkit-transform: rotate(-315deg) translate3d(0, 0, 0);

@Banana that don't seem to do anything either, bot in the body or directly on any of the div tags. [Jsfiddle](http://jsfiddle.net/362vtgfm/3/) has is on all — msr, Jun 23 '15 at 12:11
yea ive just googled and it seems chrome devs have removed this one. apparently they force us to use the font anti aliasing... — Banana, Jun 23 '15 at 12:15
maybe this? http://stackoverflow.com/questions/6846953/wonky-text-anti-aliasing-when-rotating-with-webkit-transform-in-chrome — Dmitriy, Jun 23 '15 at 12:17
@Dmitriy that one helps, not as sharp as Firefox but better than nothing — msr, Jun 23 '15 at 12:36
@DCdaz -webkit-backface-visibility: hidden; seems to do the same jo as adding translate3d(0, 0, 0); — msr, Jun 23 '15 at 12:40
@msr the main difference is translate3d will activate GPU acceleration. — , Jun 23 '15 at 12:48
@msr change your question title from blurry to jaggy or sharp as this is not about it being blurry it's about your font being to sharp & you require an anti aliasing fix. — , Jun 23 '15 at 13:05
@DCdaz correct. The issue with both of the solutions is before it was more clear but jagged, now it is more blurred of the anti-a.. not really great any of them. — msr, Jun 23 '15 at 13:13

Shrinivas Pai · Accepted Answer · 2015-06-24T05:36:29.040

5

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

-webkit-backface-visibility: hidden;

Fiddle

edited Jun 24 '15 at 05:36

answered Jun 23 '15 at 12:24

Shrinivas Pai

7,491
4
29
56

score 1 · Answer 2 · answered Jun 23 '15 at 12:21

you are missing a transform origin -webkit-transform-origin: 50% 50%;

add that to .discount-trap

Then have a mess around with the width of .discount-trap

On Webkit browser's width effect's transform rendering for some reason so to de-blur it and align your letter you will need to mess with it till it render's the way you want it to.

Also set a line height to stop your letter's & number's from dancing around.

e.g. line-height:1;

score 1 · Answer 3 · answered Jun 23 '15 at 12:46

You add translate3d property , it will render text without blur...

.discount-trap {
border-bottom: 33px solid #74c331;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  height: 0px;
  width: 150px;
  -webkit-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -moz-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -ms-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -o-transform: rotate(-315deg) translate3d( 0, 0, 0);
  transform: rotate(-315deg) translate3d( 0, 0, 0);
  text-align: center;
  position: absolute;
  top: 25px;
  color: white;
  text-shadow: 0px 1px 2px black;
}

Css rotated text is jaggy

3 Answers3