Blurry Text on hover

[ghost]

There is a blurry text on hover appears on chrome. Can this be fixed ?

[poi33]

@web-tiki did we have this issue before?

[ghost]

You can compare the behavior on chrome and on firefox.
The problem is the skewed element on chrome makes the text on it blurry and the image also.
I don't know how to fix that.

[web-tiki]

Hello @muhammedmagdi @poi33 ,
This issue has been around for a long time. Chrome renders text blurry when it is transformed and "untransformed".
I just made a new test and it seems the text is not blurry anymore when 2d transforms are used (see here https://jsfiddle.net/webtiki/26qz5shr/).

We could remove the 3d transforms and only use 2d transforms instead for the titles and text hover effect. Even though 3d transforms are supposed to be more performant.

[ghost]

Hello @web-tiki
Thanks for your response,
I have tried so many solutions and I have already made 2d transform instead of 3d but the problem is still existent. The problem with the skewed elements .. Chrome makes text blurry on any skewed element whatever this text has transformed with 2d transform or 3d .. I even tried to remove all transforms and make only text opacity change on hover but it doesn't work too.

[ghost]

Also on firefox the text keeps blurry for a while and then becomes clear.

[web-tiki]

@muhammedmagdi then there is no way to solve this issue yet...

[poi33]

I'll tag this as a bug web-tiki since its unwanted behavior but there is currently not a lot we can do about it.

[ghost]

@poi33 @web-tiki
To solve this issue, I just suggest using clip-path instead of skew and rotate3d like the following example :
https://codepen.io/tstoik/pen/qZEZJp
The only problem is at that example is that it isn't fully responsive. I didn't test it on all browsers.

[web-tiki]

@muhammedmagdi that is clearly the way to go in the futur but for now, I don't want to use it as it isn't supported by Edge/IE. See canIuse

[ghost]

@web-tiki Yes, I was going to say that I just tested on IE but it doesn't work unfortunately. But I found you have already mentioned that.
But you can notice this sentence :
Support for clip-path in SVG is supported in all browsers with basic SVG support.
Can we do it as SVG ?

[web-tiki]

To make the hexagons, it would be a good alternative but the hover effect would be pretty hard to make and buggy because of the transitions. It would require JS to make it consistent.

With other hover effect, it could be achived though (example here)

[daslicht]

@poi33 @web-tiki
To solve this issue, I just suggest using clip-path instead of skew and rotate3d like the following example :
https://codepen.io/tstoik/pen/qZEZJp
The only problem is at that example is that it isn't fully responsive. I didn't test it on all browsers.

that looks even better !

[web-tiki]

@daslicht If the low browser support of clip-path isn't an issue for you then you definetly should go down that route ;)
See caniuse for clip-path browser support table : https://caniuse.com/#feat=css-clip-path

[poi33]

@web-tiki we might want to use clip-path now? Or want to wait for EI11 to be unsupported?

[web-tiki]

@poi33 Clip-path support has become much better but I don't think it is a good idea to use it yet.
The risk ratio of it failling compared to the benefit of using it inst' hight enough yet.