Text blurring only on firefox with animation

Asked Oct 15 '18 at 14:05

Active Oct 15 '18 at 14:07

Viewed 28 times

Trying to get a clean text for my view. This code shows clean text on chrome/IE but not on Firefox which for some reasons shows me a blurry text.

Here's a reproduction of my problem : https://jsfiddle.net/z7egrnod/

Does anyone have a solution to counter this ? I just can't understand how is it possible to have a blurry text.

.skewContent {
height: auto;
-o-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
transform: skewY(-6deg);
transform-origin: top left;
overflow: visible;
}

.skewContent#toolbox {
    margin-top: -110px;
    outline: 1px solid transparent;
}

.containerSkew .skewFix {
-o-transform: skewY(6deg);
-moz-transform: skewY(6deg);
-ms-transform: skewY(6deg);
-webkit-transform: skewY(6deg);
transform: skewY(6deg);
}

Image example on chrome :

Image example on firefox :

edited Oct 15 '18 at 14:07

asked Oct 15 '18 at 14:05

Nicolas S.

Please fix the link of the `reproduction of your problem`. – Alexandre Elshobokshy Oct 15 '18 at 14:05
Done, @IslamElshobokshy – Nicolas S. Oct 15 '18 at 14:07
You are doing skew back and forth on the text. Don't apply the skew on text. – sabithpocker Oct 15 '18 at 14:23
@sabithpocker Then how can I have the text being normal in a div who is skewed ? – Nicolas S. Oct 15 '18 at 14:27
Depends, if you only want a skewed background or so, you can use a pseudo element using `:before` or `:after` and skew it instead. – sabithpocker Oct 15 '18 at 14:33
Check [this discussion](https://stackoverflow.com/questions/27501435/chrome-text-blurry-when-skew-back-skew-10deg-skew10deg) – sabithpocker Oct 15 '18 at 14:33
1

So I have to use the pseudo element `:before` to make the background skewed so I can normally use the div skewContent right ? @sabithpocker – Nicolas S. Oct 15 '18 at 14:38
1

Yes, [this answer already got one live example](https://stackoverflow.com/a/27501815/427146) – sabithpocker Oct 15 '18 at 14:41
I have some difficulty to apply it; when I add ::after on containerSkew nothing is changing for some reason. Do I have to change the css class to put every skew changement into the pseudo element after or is there smthing else ? @sabithpocker – Nicolas S. Oct 15 '18 at 15:18
You can either post a new question or update the questing with your updated problem. Your current issue is not clear without a code snippet. – sabithpocker Oct 15 '18 at 15:20
Got it in the end, thx ! – Nicolas S. Oct 15 '18 at 16:09

Text blurring only on firefox with animation

0 Answers0