Hey 👋

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:

<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:

<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. Then after Memberstack has loaded on the page a class is added to the elements and the content is displayed as it should.

Did this answer your question?