Streaming live at 10am (PST)

Safari Glitches: Navbar and other elements disappearing randomly and other


#1

Very odd glitches in Safari, don’t know how to fix that:

  1. Sometimes my navbar disappears, if I scroll the page it appears back, this can happen on any page.

  2. On the contact page both navbar and a div with a background image disappears. It reappears back as soon as I touch the mouse. I have a preloader-div as a general holder for all the content which has an interactions applied to it, however this glitch only happens on a contact page, so I don’t think it should be the cause?

Both glitches are not easy to replicate, but I noticed they tend to happen when I refresh the page , or surf the site a bit longer, clicking some links and buttons etc, however if I just quickly skip through pages usually all is well.

Here is a video demonstrating both of the glitches (demo performed in private tab)

UPDATE: Forgot to mention another bug, which happens 1 out of 4 times or so when I click “read reviews” on the books page, sometimes upon scroll the page jumps quite ugly. I have a very tricky set of interactions on this page, but then again in Chrome it works smoothly.

Here is a video on that one

Mac OS 10.13.6 (17G65)
Safari Version 11.1.2 (13605.3.8)
Also here is what I have in my project settings custom code:

Header:

<style> 
    
 html.wf-loading * {
   
        opacity: 0;
    }
  
  html {
    
 -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);  
  }
</style>

<style>

.navbar {
-webkit-backdrop-filter: blur(10px);

}
</style>

 <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />

<style>
.cc-revoke {
display: none;
}
</style>

Footer:

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    <script>
        var enableGA = function() {
          (function(i, s, o, g, r, a, m) {
              i['GoogleAnalyticsObject'] = r;
              i[r] = i[r] || function() {
                  (i[r].q = i[r].q || []).push(arguments)
              }, i[r].l = 1 * new Date();
              a = s.createElement(o), m = s.getElementsByTagName(o)[0];
              a.async = 1;
              a.src = g;
              m.parentNode.insertBefore(a, m)
          })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
          ga('create', 'UA-122073496-1', 'auto');
          ga('send', 'pageview');
        };
        window.addEventListener("load", function() {
            window.cookieconsent.initialise({
                "palette": {
                    "popup": {
                        "background": "#EEEEEE"
                    },
                    "button": {
                        "background": "#F89406",
                        "text": "#ffffff"
                    }
                 },
                revokable:true,
                "theme": "classic",
                "type": "opt-in",
                "content": {
                  "message": "We use cookies to provide you best experience on our website. We also use Google analytics for our internal statistics. You may choose to disable analytics if you prefer. ",
                  "dismiss": "Disable analytics",
                  "allow": "Got It!",
                  "link": "Learn More",
                  "href": "/privacy-policy"
                  },
              
                onInitialise: function (status) {
                  var type = this.options.type;
                  var didConsent = this.hasConsented();
                  if (type == 'opt-in' && didConsent) {
                    // enable cookies
                    enableGA();
                  }
                  if (type == 'opt-out' && !didConsent) {
                    // disable cookies
                    // NOTHING TO DO
                  }
                },
                onStatusChange: function(status, chosenBefore) {
                  var type = this.options.type;
                  var didConsent = this.hasConsented();
                  if (type == 'opt-in' && didConsent) {
                    // enable cookies
                    enableGA();
                  }
                  if (type == 'opt-out' && !didConsent) {
                    // disable cookies
                    // NOTHING TO DO
                  }
                },
                onRevokeChoice: function() {
                  var type = this.options.type;
                  if (type == 'opt-in') {
                    // disable cookies
                    // NOTHING TO DO
                  }
                  if (type == 'opt-out') {
                    // enable cookies
                    enableGA();
                  }
                }
            }, function (popup) {
                $('#revoke-cc-btn').on('click', function() {
                    popup.revokeChoice();
                });
            })
        });
    </script>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Due to your other post about Favicon I have to ask: what is your Safari version + OS version? Can you check if this issue occurs in Safari 11.0.x?


#3

I actually don’t have Safari 11.0 anywhere to test


#4

Hi @radmitry

Thanks for posting about this — it definitely looks like odd behavior.

To verify if this is a bug within Webflow, or custom code related, can you please try the following?

  • Temporarily remove all custom code from the site wide settings and those individual pages, including any embeds
  • Try to reproduce the error while being logged into Webflow using Incognito mode
  • If the problem persists, please take a screenshot of your Console and send it this way

Thanks in advance!


#5

Hi @Brando ,

It still happens with all the code and embed removed in private window.

And console seems to be totally empty

Navbar still disappears time to time and half of the contact page disappearing


#6

Hi @radmitry

Thanks for testing that out.

I’ve take a closer look at the project. The disappearing navbar is definitely odd behavior — I’ve filed a report with the team to have this one investigated by our engineers. We will look into it further and let you know what we find.

The other issue, with the contact page — I made a quick video explaining what the issue is and one way you can work around this: https://cl.ly/2h0C2r3a0C3Q

Hope this helps and I’ll post back here with more information when I have it.

For that third issue, It looks like the navbar is being affected by the growing parent element. Can you try removing the nav from the parent element to see if that helps?
27%20PM


#8

Thanks a lot @Brando

  1. OK, will wait on the Webflow team for a possible solution
  2. Solution for the contact page worked perfectly !
  3. Moving the navbar out of parent element doesn’t help with the jumping glitch , and apart from it , it would destroy the design of my page preloader, that’s basically why I placed all elements in a parent one.

Thanks once again, and I never knew you can use same short key which creates a symbol to disintegrate it! Looks like the list of shortcuts also doesn’t mention it.

:webflow_heart::relaxed:


#9

Hi @radmitry

I’ve done some extensive testing with that third issue and it looks like the issue is based around the anchor link combined with the hide/show interaction for that book review section. It looks like Safari is having a hard time with both at the same time.

I tried changing the interaction in several ways to workaround the glitch, but I couldn’t find a way. The best solution I found was to remove the anchor link and the interaction works perfectly without any glitch.

I’ll keep you updated about that first issue.


#10

Thanks @Brando

As for the jumping page issue I’ve added data-scroll-time=“0” to my anchors and it does seem to resolve the glitch, even though it disables the smooth scroll, I think I can live with that


#11

Hi @Brando

Any news on disappearing navbar? I’d like to present this site to my client and this bug is really disappointing.


#12

No updates yet on this @radmitry. Is the above workaround you mentioned still working?


#13

@Brando This workaround above was for the jumping navbar upon scroll through button interatcions, yes it works, but it doesn’t help with navbar disappearing out of the blue sometimes completely.


#14

Ah thanks for the update! I’ve pinged the team on this and we are still looking into it. I’ll report back when I have more information for you.