Navigation
Archive / Fade-in problem with Safari Desktop
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • March 22, 2017 at 2:22 pm #1416661

    orangecrush
    Participant

    Hi,

    1. On Safari Desktop (Mac), after fade-in, the text abruptly turns darker. It is fine on mobile, Chrome and Firefox.

    2. On Chrome Desktop (Mac) the resolution slider is jerky. Again, fine on mobile.

    Tested without plugins including WP Rocket.

    Any ideas,

    Thanks,

    Bill

    March 22, 2017 at 2:24 pm #1416667

    orangecrush
    Participant
    This reply has been marked as private.
    March 23, 2017 at 12:36 am #1417240

    Rue Nel
    Moderator

    Hello There,

    Thanks for writing in! You seem to forget to send in the username so that we can login. By the way, could you please disable WP Rocket?

    Please let us know how it goes.

    March 23, 2017 at 10:47 am #1417832

    orangecrush
    Participant

    Thanks Rue, I added the username!

    Yes, I tested the site without WPRocket. It is off right now. Still same problem.

    March 23, 2017 at 7:48 pm #1418461

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in!

    #1] I have compared your site in Chrome and Safari. I could quite see a slight difference. I have inspected the colors using the Dev Tool to check the css and the color applied. The color of the text is just the same which is rgb(77,77,77). You can check it here: http://prntscr.com/enqloz
    This issue could be how the browsers translate the colors and has nothing to do with any of the styles. Maybe you are referring a group of text in particular which you can easily see the darker text? Could you please create a screenshot and show it to us?

    #2] I cannot take notice of any issues with the slider. I also compared it with other browser. Could you please elaborate?

    Thank you in advance.

    March 23, 2017 at 9:44 pm #1418540

    orangecrush
    Participant
    This reply has been marked as private.
    March 23, 2017 at 9:51 pm #1418546

    orangecrush
    Participant
    This reply has been marked as private.
    March 24, 2017 at 2:45 pm #1419432

    Rad
    Moderator

    Hi there,

    Hmm, it’s harder to reproduce or catch the issue since it’s instant and almost I can’t see it. I’m on Mac too.

    I’ll keep on checking and let you know once I find something.

    Thanks!

    March 24, 2017 at 6:25 pm #1419626

    orangecrush
    Participant

    Thanks Rad, apparently it is a bug in Safari. I found this article from 2014.

    https://theksmith.com/software/safari-bug-text-suddenly-appears-bold-after-css-animation/

    I am looking to see if there is a newer fix. It’s seems it is more noticeable with “thinner” fonts like I am using.

    March 24, 2017 at 7:11 pm #1419649

    orangecrush
    Participant

    I went ahead and added this:

    body,
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    It fixed the problem. Is that good or would you recommend something else?

    March 25, 2017 at 4:32 am #1419949

    Rad
    Moderator

    Hi there,

    Ah, thanks for sharing! Though I can’t still notice any jumping, is it related to text?

    Thanks!

    March 25, 2017 at 10:24 pm #1420420

    orangecrush
    Participant

    Yes, it is the text. The WebKit code above has solved the problem. On the link above you can read more about the problem and see 2014 some videos of it.

    Thanks!

    March 26, 2017 at 5:17 pm #1420904

    Rad
    Moderator

    Hi there,

    I see thanks for sharing, I just wonder how the transition and jumping are affected by the text when they are just displayed on the same browser. That font smoothing is the solution for different looking text between browser, but shouldn’t cause jumping since it’s on same browser and same sizes. I’ll check that out get more details 🙂

    Thanks!

  • Author
    Posts