Hey,
my webflow site works flawlessly on desktop.
On mobile, however, it works at first and then suddenly everything above and below of the current viewport turns completely white and everything becomes unresponsive. I can’t even reload the page anymore. It only works again when i open it in a completely new tab.
This issue is very inconsistent. It happens most of the time when scrolling through the whole page very fast or when switching between the different tabs further down on the page (Paid Ads, Organic Content, Website, Newsletter).
At first i thought the custom code was the problem. So i removed it and it seemed to work. Then i made it so that it only applies on screen-sizes above a certain threshold. It continued working for a while but now i’ve just realized that the issue is back.
This happens in safari and google chrome when connected to wifi or cellular. I have tested it on two iPhone Xs and one iPhone 11 Pro. This issue was constantly happening on two of those devices: One iPhone X and the iPhone 11 Pro. The only difference between those devices is that the one where everything works fine has iOS 15 installed and the two where this issue persists have iOS 16 installed.
The custom code in the head tag:
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
};
</script>
<style>
@media (min-width: 1025px) {
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
a, button {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
}
</style>
The custom code before the /body tag:
<script>
// Pause videos when not in viewport
const videos = document.querySelectorAll('video');
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.play();
console.log(`Video with ID ${entry.target.id} started playing.`);
} else {
entry.target.pause();
console.log(`Video with ID ${entry.target.id} stopped playing.`);
}
});
});
videos.forEach(video => observer.observe(video));
</script>
<script>
//Start from top when reloading page
$(window).on('beforeunload', function() {
$('pageBody').hide();
$(window).scrollTop(0);
});
</script>
<script>
//sound on/off for different use cases section
document.addEventListener("DOMContentLoaded", function() {
// Get the divs with speaker images
var speakerDivs = document.querySelectorAll('.volume-toggle');
speakerDivs.forEach(function(div) {
div.addEventListener('click', function() {
var video = document.getElementById(div.dataset.videoid);
if (video.muted) {
video.muted = false;
div.querySelector('.volume-on-icon').style.display = 'block';
div.querySelector('.volume-off-icon').style.display = 'none';
} else {
video.muted = true;
div.querySelector('.volume-on-icon').style.display = 'none';
div.querySelector('.volume-off-icon').style.display = 'block';
}
});
});
});
document.querySelectorAll('.w-tab-link').forEach((tab, index) => {
tab.addEventListener('click', function() {
for (let i = 1; i <= 4; i++) {
var video = document.getElementById(`video-tab-${i}`);
if (video) {
video.pause();
video.muted = true;
var speakerDiv = document.querySelector(`[data-videoid="${video.id}"]`);
if (speakerDiv) {
speakerDiv.querySelector('.volume-on-icon').style.display = 'none';
speakerDiv.querySelector('.volume-off-icon').style.display = 'block';
}
}
}
// Find the video in the clicked tab and play it (muted)
var videoInClickedTab = document.getElementById(`video-tab-${index + 1}`);
if (videoInClickedTab) {
videoInClickedTab.muted = true;
videoInClickedTab.play();
}
});
});
</script>
One more thing that might be helpful to know is that the, from S3, embedded video files are displayed as mp4 for safari and webm for chrome. Some of the mp4 files are pretty big (up to 13 MB). For the webm files, it’s obviously not as bad. I know this is usually a no-go but the loading speed doesn’t seem too affected by it. It’s all a work in progress 
Here is my site Read-Only: LINK