Icongrid text is blurry on Chrome - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
February 23, 2019 at 8:18 pm #1070782

Lowisoft
Participant

Hi,
Thank you for your great theme.
I am using the new icongrid component and on Firefox it works like a charm. On Chrome however, the front text as well as the back text is moving 1 pixel up after the transformation and becomes blurry. I know that blurry text after tranformations or rotations is common for Chrome, but is there a way to improve the visibility of the text? On Edge, the text moves as well, but it stays clean and sharp.

I’ve read that using -webkit-transform-origin or backface-visibility could fix this issue, but I don’t get it to work.

Thank you in advance for your answer.

Lowisoft.

February 24, 2019 at 10:23 am #1070853

Victoria
Inactive Moderator

Hey Lowisoft,

Could you please give us a link to your website, we need more context to be able to help you.

Could you please attach some screenshots of the issue on your end?

Best regards,
Victoria

February 24, 2019 at 12:45 pm #1070900

Lowisoft
Participant

Hi Victoria,
I’ve added the links to the private content section.
Here are also two screenshots (on for Chrome and one for Firefox):
Chrome: https://ibb.co/yfM6YdY
Firefox: https://ibb.co/JBsQ2kF

Thank you in advance for your answer.

Lowisoft.

February 27, 2019 at 8:09 pm #1072365

Yigit
Keymaster

Hi,

I checked your website on Chrome v71.0.3578.98 and it looks fine on my end. Attached a screenshot in private content field.
Which version of Chrome and OS are you using?

Best regards,
Yigit

February 28, 2019 at 12:20 am #1072438

Lowisoft
Participant

Hi Yigit,

I am using the newest official-build version of Chrome (v72.0.3626.119).
Your screenshot looks perfect, but maybe Chrome changed something in v72 that makes the text blurry after it rotated.
I tried serveral CSS tricks (as mentioned in my first post) but I couldn’t get around the blurry text.

Best regards,
Lowisoft.

March 3, 2019 at 7:45 pm #1074012

Victoria
Inactive Moderator

Hi Lowisoft,

Could you please clear the cache, check again and get back to us.

Best regards,
Victoria

March 3, 2019 at 8:34 pm #1074026

Lowisoft
Participant

Hi Victoria,

I’ve cleared the cache but nothing changes.
In addition, I updated my Chrome browser to version 72.0.3626.121 (Official Build) (64-bit), but the blurry text still remains.
As I said in my previous post, the issue could be related to the new v.72 version or to the fact that I’m using a Windows computer.

Best regards,
Lowisoft.

March 5, 2019 at 10:34 pm #1075120

Victoria
Inactive Moderator

Hi Lowisoft,

I’ll ask my colleagues to have a look on a PC.

Best regards,
Victoria

March 6, 2019 at 3:01 am #1075223
Mike
Moderator
Hi,
This seems to help, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
#top #wrap_all #main .article-icon-entry h4.av_icongrid_title,#top #wrap_all #main .article-icon-entry h6.av_icongrid_subtitle {
-webkit-font-smoothing: subpixel-antialiased !important; 
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden !important; 
transform: translateZ(0);
text-shadow: #000 0px 1px 1px;
}
```
Best regards,
Mike
March 6, 2019 at 10:44 pm #1075683
Lowisoft
Participant
Hi Mike,

The css that you suggested is only changing the title and subtitle of the icongrid (and not the text on the back of the card), but I modified the code so that it also targets the back text.
However, the css does not solve the issue. While the title and subtitle might seem slightly better (because of the shadow), the back text is still extremely blurry.
In addition, I noticed that on the flipcards of the bottom left or right corner, the text seems to be the most blurry.

Here are two screenshots:
Chrome with new css: https://ibb.co/jyPw3rS
Firefox with new css: https://ibb.co/WD3pBSV

As you can see, there is still a big difference between Firefox and Chrome.

Best regards,
Lowisoft.
- This reply was modified 5 years, 8 months ago by Lowisoft.
March 7, 2019 at 6:56 am #1075802

Mike
Moderator

Hi,
I see what you mean, do you see this happening in any other elements on your site, or is it only in the icon grid?

Best regards,
Mike

March 9, 2019 at 3:35 pm #1076776

Lowisoft
Participant

Hi Mike,
The issue only appears in the icon grid and only for Chrome. (Firefox and Edge work fine). Given that your collegue is not experiencing the issue on Chrome v.71, I think that the new v.72 of Chrome (on Windows) is causing the issue.
The text is jumping one pixel up after the transformation and therefore appears blurry. As I already said in my first post, blurry text is a common issue on Chrome when transforming and rotating a text. There are various workarounds on the internet to solve this problem (mainly CSS solutions), but unfortunately none of them had an effect on the blurry text of the icon grid.

Best regards,
Lowisoft.

March 12, 2019 at 4:37 am #1077614
Mike
Moderator
Hi,
I have tried many of the solutions I could find such as this one:
```
#top .avia-icongrid-inner,#top .entry-content-header h4,#top .entry-content-header h6,#top .avia-icongrid-text p {
    perspective: unset !important; 
}
```
But it seems that the only one that worked good was “transform: unset;” but this also broke the element.
I’m starting to believe that this might be a limitation in Chrome.

Best regards,
Mike
April 1, 2019 at 7:34 pm #1085677

Lowisoft
Participant

Hi Mike,
It’s a pity.
I’ve tried your solutions and as you already explained none of them worked properly.
I agree with you that the fault lies probably on Chrome’s behalf and hopefully they are fixing the problem in a future version.
Nevertheless, thank you and your team for your efforts and let me know if you run into a solution.

Best regards,
Lowisoft.

April 2, 2019 at 5:10 am #1085824

Mike
Moderator

Hi,
Sorry, we will leave this open in case we find a solution.

Best regards,
Mike
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.