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:
<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:
<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.
Comments
2 comments
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
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.Â
Please sign in to leave a comment.