I was experiencing an issue where internal page loads would glitch a true “white” color, and page transitions were not satisfying. Essentially, Ready Mag loads each page separately, and the old page would disappear, the web browser’s default background appears during the loading process, which is true “white”, and then the next page begins to load. I added a very basic curtain that covers the screen with my site’s color value (whatever that is for you). The curtain instantly appears on the page click (bypassing the “true white” page load), and then I set a Bezier Fade out for a satisfying transition.
Hi! This was useful for a problem I was also facing. Using the code though, it only seems to work on my landing page. Any idea how to get it working across all pages?
Hey! I am not a web expert and am learning on the go. But I think the Issue is that there are transitional states between web page loading or within your actual project that don’t have the same color code (color tone) of your background. I have a little piece of code that worked for me, you just have to insert the color code of your website into this code, the rest should be universal and work.
/* ------------------------------------------
iOS Safari page transition flash fix
Prevents black / white flashes during
navigation and repaint
------------------------------------------- */
/* Force a consistent background at every level /
html,
body {
background:#e6e6e6!important; / match your site background */
}
/* Reduce iOS Safari repaint / tap highlight glitches */
{
-webkit-tap-highlight-color: transparent;
}
body {
-webkit-overflow-scrolling: touch;
}
I bolded the important bit to change. This worked for me. Also, this goes in the “head” section and make sure all of your code in the “head” section is pasted in between…..
