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

Answer 1

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