Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1070782

    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.

    #1070853

    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

    #1070900

    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.

    #1072365

    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

    #1072438

    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.

    #1074012

    Hi Lowisoft,

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

    Best regards,
    Victoria

    #1074026

    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.

    #1075120

    Hi Lowisoft,

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

    Best regards,
    Victoria

    #1075223

    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;
    }

    2019-03-05-195805

    Best regards,
    Mike

    #1075683

    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, 9 months ago by Lowisoft.
    #1075802

    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

    #1076776

    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.

    #1077614

    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

    #1085677

    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.

    #1085824

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

    Best regards,
    Mike

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.