Weird flickering in Safari

Hi! I’ve ran into this problem with safari… That is… Well I figured it would be easiest to explain it with a video… so here you go: :blush:

The problem is this “flickering”/loading delay appearing on page changing (as you can clearly see here)…
Hope that some of you guys, who knows more about this than me can help me out here! :smiley:

(P.s tried to find a solution for the problem my self… but honestly I don’t really now what the problem actually is :slight_smile: … )
Here is the sharing link for the project: https://preview.webflow.com/preview/struer-friskolev2?preview=4375a481552bc67167b9c859843b0abb which is by the way a school website :blush:

Best,
Jonatan

1 Like

Lol! Jonhatan I LOVED the video (: Piano and intermission cracked me up.

Ok to begin with, select the element that flickrs and give it the highest Z-index in your page… Click on position:relative and put a high value in the z-index.

If it doesn’t fix it, come back for some tortured custom code.

Haha! Glad you liked the video :smile:

Unfourtunately that didn’t seem to fix the problem…
So yay! Bring the torture on! :blush: :sunny:

Just for info: Weirdly enough it seems like that on my older Macbook Pro running Safari 7.1.2 the problem doesn’t seems to appear at all…! ? So could it be just a problem with my computer? (Though the only plugins i have installed in Safari is Adblock (Which I by the way have tried deactivating, but with no luck :pensive:) OR just with the newer update of Safari…?

My bad, sorry, your video was too distracting and I didn’t even understand the question… I thought there was some flickering but you have a loading issue that makes an element move (right?)

So give dimensions in px to your .logo element and it will stop.

(PS I don’t reproduce the issue on Safari myself)

Thanks a lot for your help Vincent! :smiley:
Yearh… I realized that “flickering” was not the correct term :relaxed: - Sorry my bad!

So giving the dimensins in px did work, and actually I had also tried it (I know that sounds very stupid)…!

But then this border appeared around the .logo element on loading … But I have just done a huge discovery! ( :arrow_left: - read that ironically)
– You can add border:0px; to html and that will do it… :kissing_closed_eyes: :notes::relaxed: So… sorry for bothering with this :smile:! But at least i got a nice video out of it… :blush:

Best to you! Have a good one!
Cheers! All the best from Denmark!! :smile:
By the way @vincent just wanted to say thanks on behalf of well… all webflow users for the huge help that you provide here in the forum :blush: You’re really doing a great piece of work! :smile:

1 Like

So you got how it works right? And why it affects only Safari… Browers have defaults value to display html elements. They vary from a browser to another. Specifying zero actually change from default to zero. Webflow has a resest css file to deal with browser defaults, to even them.

I’m having a similar experience with my website (http://bokonlinebanking.webflow.io/).

Vincent: I sent you a private message.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.