How do I prevent webflow from showing my member content on page load?

Article author
Josh Lopez

Hey there 👋
We have been asked recently how to prevent the page from flickering content with the data-ms-content attribute. Here is our workaround!

 

Note: This is for Webflow

 

Step 1:

Add this custom CSS above your Memberstack header code.
The end result would look like this:

custom-style-flicker.JPG

<style>[data-ms-content]{display:none}.ms-ready{display:inherit}</style>

 

Step 2:

Add the custom Jquery to your footer code.

The end result would look like this:

custom-script-flicker.JPG

<script> 
MemberStack.onReady.then(function(member) {  
  $('[data-ms-content]').each(function(i,el) {
    $(el).addClass('ms-ready');
  });
});
</script>

 

Why do I have to add this additional code to stop flickering?

The reason you have to add this code is that Memberstack is a third party script. Meaning it takes some time for your browser to retrieve all the information it needs. By adding some style code above the Memberstack header script, it ensures that the content can be hidden as quickly as possible and the browser doesn't have to retrieve it. After Memberstack has loaded on the page, a class is added to the elements, and the content is displayed as it should.

Was this article helpful?

Comments

2 comments

  • Comment author
    Tomas Ludwig

    Josh Lopez I've deployed your code yesterday and found out, that for some reason it doesn't work on macOS in Safari browser. All the links didn't display at all. Chrome and Firefox worked fine, but had to remove it for now. Do you have an idea, why this happens? Thanks

    0
  • Comment author
    Josh Lopez

    Hey Tomas 👋

    I would have to see it in action to tell what is going on. My first guess would be to add "!important" to the CSS like:
    <style>[data-ms-content]{display:none}.ms-ready{display:inherit !important}</style>

    If you add it back and submit a support ticket we can take a look and help the best we can. 

    0

Please sign in to leave a comment.