Streaming live at 10am (PST)

Set as initial state flickers on page load


#1

Hi,

I just wanted to report a minor issue I’m having with Interactions 2.0.

When I “set the initial state” of an element to “display:none” on page load using Interaction 2.0, the element is displayed for a split second before disappearing - i guess the time taken for the javascript to run. This was not the case with Interactions 1.0.

I know I can just change the display in the styles panel to display:none - but it seems like setting the initial state in interactions 2.0 should work for this.

Here’s the page I’m currently working on - http://fit4fifo.webflow.io/

Once it loads, you’ll notice coloured bars underneath the nav links at the top disappear. If you refresh the page

I’m just wondering what, if anything can or will be done about this issue other than styling the element in the styles panel as mentioned above.

Cheers


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


#2

Hi @Diarmuid_Sexton,

While testing I wasn’t able to reproduce this behavior on my end - can you send me a screen recording, so that I can take a closer look?

Thanks! :slight_smile:


#3

Hi Nita,

Sorry for the delay in getting back to you. Here’s the video - https://www.useloom.com/share/e5cfb4dc90e94002b4024260563dc675

You will see the bars under the nav links flicker on and off for a split second - i’ve refreshed the page a few times in the video - so you’ll see it happen a few times in the video

Try checking the page again - i think I’d change the initial state in the styles panel the last time - http://fit4fifo.webflow.io/

Here’s the site preview link - https://preview.webflow.com/preview/fit4fifo?preview=a2df4066c254c9d73c781534e1408e80


#4

Hi @Nita,

Just wondering if you’ve any update on this?

Cheers,

Diarmuid


#5

Hi @Diarmuid_Sexton

I do see a bit of FOUT (flash of unstyled text), but I’m not seeing the underline hover state flash on this end:

Are you also seeing this in incognito with browser extensions disabled? Can you please test that to see if you see the behavior there as well?


#6

Hi Brandon,

I had the style adjusted in the styles panel. Can you check again now?

http://fit4fifo.webflow.io/

And I’ve checked and it’s happening in all browsers.


#8

Hi @Diarmuid_Sexton

Thanks for sharing that link and letting me know.

After checking out your live site, I was able to see the issue on this end. I did some testing and it doesn’t seem I can reproduce this issue in any other scenario except for where FOUT is present. I think this flash of unstyled text that’s affecting the button is also affecting the nav link animation div.

Just to be sure, though, I’ve let the team know about this and we will look into it more to make sure there’s no bug here.

I did find a workaround though. You can add this bit of CSS inside the <head> tag of your site-wide custom code settings:

<style> 
    
 html.wf-loading * {
   
        opacity: 0;
    }
    
</style>

Can you please try adding this to see if it resolves the issue?

​Thanks in advance!


#9

Hey Brandon,

Yes, that fixes it. I can still see it flicker for the tiniest amount of time - but it’s negligible.

I’ve noticed this IX2 “set initial state” flicker issue in other sites I’ve been designing also. I’ll send you examples when I come across them so you can see.

Thanks