CSS transitions flashing upon loading my site

Hello,

The problem

I am having trouble with my website when it initially loads. There seems to be a flash of content where the CSS transitions run before the content of the webpage fully loads. To make things more awkward I am having trouble replicating this problem for others to view. One thing I have noticed is that it only occurs on the initial page load, it will load correctly, with no transitions running, if you keep refreshing the page after this.

What I need

Quite simply, I want the site to load without the CSS transitions playing out before the whole page loads. I’m not sure why this would be happening.

I have provided my site, a GIF of the issue that I am talking about, and the code for my website.

http://www.markkubik.co.uk/

Thanks for your help

Hi,

I can replicate your issue by clicking on the link you provided. If I copy and paste it (the link), the issues does not occur and also when I tried copying fCC’s anchor tag into codepen and clicking on it from there it did not have any issues.

I did find this, which might be of help:

Sorry, I can’t be of more help.

PS: Your portfolio page is coming on really nice :slight_smile:

Cheers for the help, and the kind words!

This problem has been bugging me for a awhile, I have literally put this everywhere and anywhere, still with no luck. I’ll take a look through the link and see if that helps at all.

This is because you are using visiblitiy: hidden instead of display: none together with transition: all

From mdn: visibility - CSS: Cascading Style Sheets | MDN

To both hide an element and remove it from the document layout, set the display property to none instead of using visibility.

So what’s happening is that the modal is drawn to the screen in the position you stated, then transitioned offscreen and invisible.

What you want to is used display: none to completely remove the element, the use display: block when you want it to show again.

The only problem with that is my modal now snaps out immediately when i close it, without any animation. I will double check whether it works though thanks

So yeah, seems to work. Still getting a slight flash of content, but not nearly as bad. The only thing now is getting the modal to animate out before disappearing, any ideas?

You could try adding a class for just the display: none, and remove it once the page loads. That might work.

Hey, your portfolio is growing up greatly, I’ve tested the Wikipedia App, the Weather App and the Quotes App, but the Twitch one is a bit messed up, I don’t know if you still developing it, but there are some constructive design critics I may say:
1 - The main titles font is so thin that it will not fit/appear well on low DPI screens (I’ve tested on mine)
2 - I did not see if you just hide the blocks containing the users, but when I change from ALL or OFFLINE to ONLINE, the main container kinda struggle when resizing or something like that.
3 - In the search box, it would be visually more gracious if you use the same font type of the rest of the application, as well as make its corners flat like all the other divs in your application, or make the border of the other divs rounded as well.

Sorry that I did not focused on the question you asked, but I always look forward to try share some advice with whom I think it will be worth to. Again, great portfolio in general! :slight_smile:

I just upgraded chrome and can no longer reproduce the bug :face_with_raised_eyebrow: Same thing on my laptop. And this is with your original code. It may have been a browser bug all along.

Cheers! I’ve only just seen this. I’ll take another look at the twitch app.