Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

Question

I just want to skew the parent and skew it back on the child.

Example : HTML

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

Example : CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

Text inside seems ok with Firefox, Safari. But not Chrome and Opera its a bit blurry

I have to use -webkit-backface-visibility: hidden; for reduce box pixelated in Chrome

Firefox :

Chrome :

Firefox vs Chrome :

or zoomed by Photoshop

Live example : http://jsfiddle.net/1tpj1kka/

Any idea ?

NOTE !!! : web-tiki's answer is an another way solution to prevent the problem. But if any answered a real solution to resolved this skew back problem (real fix), I will accept the answer.

Why don't you use a `pseudo-element` for that? It has better browser support , rather then `transform`. — Vucko, Dec 16 '14 at 09:37
@l2aelba [I ment like this](http://jsfiddle.net/vucko/uy061t79/3/) — Vucko, Dec 16 '14 at 09:41
Visually nice question. How did you create the animated gif? — redochka, Jul 30 '16 at 16:09

score 8 · Accepted Answer · edited Dec 24 '17 at 15:46

The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.

It will also alow you to use only one tag in your markup :

@import url(https://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}

<div class="parent">
    Hello
</div>

My scenario was a bit different (I needed to fix a blurry image within a div that is skewed) but this tip helped me. +1 up — HMartch, Mar 21 '16 at 20:33

score 3 · Answer 2 · answered Jan 09 '16 at 04:48

3

Adding the 'translateZ(0)' before transformations like below forces the gpu to re-render the text and removes blurry-ness on Chrome.

This:

transform:  translateZ(0) skew(-10deg);

Not This:

transform: skew(-10deg);

answered Jan 09 '16 at 04:48

Angus

47
1

unfortunately it doesn't work anymore with current Chrome version 72 – benedikt Mar 07 '19 at 07:21

score 1 · Answer 3 · edited Dec 24 '17 at 15:46

1

You can try the text-rendering: geometricPrecision CSS property. This will force your text to not be anti-aliased, thus making the blurriness less important.

inp.onchange = function(){
   document.querySelector('.child').classList.toggle('geo');
  }

@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight:bold;font-size:50px;font-family:'Oswald',sans-serif;}

.geo{
    text-rendering: geometricPrecision;
  }
.parent {

  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;  
  width:300px;padding-left:15%;margin-left:-15%;overflow:hidden;
}

.child {
  transform: skew(10deg);  
  width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%;
}

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child geo">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
<input type="checkbox" id="inp" checked="true"/> geometricPrecision

edited Dec 24 '17 at 15:46

Protomen

9,471
9
57
124

answered Dec 12 '16 at 13:07

Kaiido

123,334
13
219
285

Thanks, Better !, But when i zooming by Photshop, I got same result. (Chrome on Mac) http://i.imgur.com/ksgKKPV.png – l2aelba Dec 12 '16 at 13:11
Yes it's not perfect, I added a toggle so you can see that it still improves things. – Kaiido Dec 12 '16 at 13:12
Yes, Its better :D – l2aelba Dec 12 '16 at 13:13

Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

3 Answers3

Linked

Related