-
Posts
-
HI,
I have an icon grid where I removed the animation using some css I found in a different thread..avia-icongrid-flipbox li:hover .avia-icongrid-front { -webkit-transform: rotateY(0deg) !important; transform: rotateY(0deg) !important; }However, I noticed a small problem. The text looks blurred until you mouseover it. I zoomed in and it is indeed pixelated until I rollover, then it appears crisp. Could someone please help me fix this? Example in the private area, though there are/will be a few of these.
Many thanks :)
Hey jonrouse,
I can’t see any difference between the regular state and hover on my end using Chrome, in which browser are you seeing this?
Best regards,
RikardHi Rikard,
Thanks for getting back to me. I’m using Safari 13.1.1 on a Mac. You’re right though, not seeing this in Chrome or Firefox.
I’ve attached a couple of screen grabs of a before and after so you can see what I’m seeing.FYI – I disabled the code which stops the tile flipping, and it is still displaying low res. I checked all the theme demos and the only one using icon grid is fine in Safari – https://kriesi.at/themes/enfold-one-page-agency/
I’m going to experiment to see if I can fix it some how.
One thing I noticed in web inspector is when I uncheck this
-webkit-perspective: 1000px;It seems to improve.
Just tried this in quick CSS and it seems to have fixed the problem, is it safe to use?!
.avia-icongrid-flipbox li { -webkit-perspective: none!important; perspective: none!important; }
- You must be logged in to reply to this topic.