Currently, I am developing a Cordova project for both iOS and Android platforms.
Within my project, I have two main pages: index.html and home.html. Each page contains an absolute positioned div (with loading feature) that is visible by default. Here is the structure:
<body>
<div id="loading_page" class="loading_page"></div>
<section> content here </section>
</body>
Accompanied with the following CSS styling:
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #00665d;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-touch-action: none;
height: 100%;
width: 100%;
overflow: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.loading_page {
background: #fff;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 25;
}
section {
position: absolute; /* tested with relative, too */
top: 85px;
left: 75px;
right: 15px;
bottom: 0;
}
The issue arises when switching from index.html to home.html using JavaScript command
window.location.href = "home.html"Seeking advice on how to resolve this flashing problem specifically observed on iOS devices.