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.
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.
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.
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?
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!
I just upgraded chrome and can no longer reproduce the bug Same thing on my laptop. And this is with your original code. It may have been a browser bug all along.