Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 8, 2015 at 6:03 pm #500043
    JuergenB

    Hi all,

    I have a site running Enfold with an Enfold Child Theme, being hosted by Bluehost.

    Recently I noticed that header fonts look pixelated, and when loading the site with a Safari browser I can actually observe the CSS being applied 2 times…

    This is especially apparent on the home page, where there are some block quote styles.

    The first time everything looks smooth and anti-aliased as it should be, and then a fraction of a second later the CSS seems to be applied again, almost as if the page loads twice, causing the page fonts to look fatter and pixelated.

    I thought that perhaps a caching issue or dynamic_avia loading is causing this, but I’m not sure.

    • There is no caching plugin installed
    • There is no CDN installed

    Any thoughts as to what I could be doing wrong?

    Sorry for the awkward description of this problem. (Login details in the private area)

    Thanks, Juergen

    September 9, 2015 at 12:37 pm #500340
    Andy

    Hey JuergenB!

    I don’t see what you are describing when loading your webpage. Which browser are you using? and which OS? Clear browser cache and hard refresh a few times.

    Cheers!
    Andy

    September 10, 2015 at 5:53 am #500809
    JuergenB

    Hi Andy

    Thanks for your help.

    Mac OSX latest version, happens on all browsers, tested on multiple machines, (2x iMac27 and a MacBook Pro
    Can be observed best on Safari as the double loading effect happens just a little more slowly there.
    I had already tried hard clearing the cache.

    On a Chrome browser it also happens, but loads so fast that it looks like only a single load, however the fonts also look pixelated and not smooth and anti-aliased. It may seem subtle, but it’s definitely happening, loading 2x and the fonts look slightly pixelated.

    I recorder a slow motion video that illustrates it here: http://www.youtube.com/watch?v=e9JZAZMyOlQ

    I also tested this on an iPad, and there it does not appear to happen.

    Please advise & investigate beyond the recommendation to clear the cache “a couple of times”

    Regards, Juergen

    September 10, 2015 at 11:41 am #500919
    Yigit

    Hi!

    “This video is private.”. Can you please make the video public so we can see the issue?

    Best regards,
    Yigit

    September 10, 2015 at 2:42 pm #501046
    JuergenB

    Hi Yigit,

    Sorry about that, I meant to make it unlisted, fixed now, please try again.

    If you cannot see what I’m talking about, wait until about 20 secs in where I zoom into detail.

    Thanks, Juergen

    September 10, 2015 at 3:17 pm #501074
    Yigit

    Hi!

    I was not able to reproduce the issue on my end on Safari but added a custom CSS code to Quick CSS field. Can you please check your website now if it fixed the issue?

    Regards,
    Yigit

    September 10, 2015 at 3:32 pm #501084
    JuergenB

    Hi Yigit:

    Brilliant! Fixed it on Safari (webkit css)

    But issue still occurs on Chrome and Firefox.

    Any similar CSS for those browsers?

    September 10, 2015 at 4:14 pm #501123
    Yigit

    Hey!

    Can you please try changing the code to following one 

    div .flex_column {
-webkit-transform: translateZ(0)!important;
transform: translateZ(0)!important;
-moz-transform: translateZ(0)!important;
}

    Since both Safari and Chrome are webkit browsers, it should solve for both. Please try flushing cache and refreshing your page a few times

    Cheers!
    Yigit

    September 10, 2015 at 6:03 pm #501244
    JuergenB

    Hi Yigit:

    Did this, and it works for Safari, but not on the other browsers.

    In the end what I did is choose a different font (Georgia) for the blockquote, where the pixelation was most noticeable, and it looks pretty smooth on all browsers. Thanks much for your help, I think we can live with it as is…

    Best, Juergen

    September 10, 2015 at 6:11 pm #501250
    Yigit

    Hi!

    No problem at all :)
    Let us know if you have any other questions or issues or would like to look further into the issue and we will be glad to try to help :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘CSS being applied 2x, causing pixelated fonts’ is closed to new replies.