Touch events are not handled on iPhone Safari when page scrolled

Question

On Safari on an iPhone, if you fast scroll the page, the white box events are not handled until the scrolling stops.

(To see this bug, you need to scroll the page by swiping and try touching the white box while the page is still scrolling. To see the expected behavior, try touching it without the page scrolling.)

 const fix = document.querySelector('.fix') const text = document.querySelector('.handle') fix.addEventListener('touchstart', handle) fix.addEventListener('touchend', handle) fix.addEventListener('mousedown', handle) fix.addEventListener('touchmove', handle) function handle(e){ text.innerText = e.type console.log(e) }

 .scroll{ width: 100%; height: 2000vh; background: rgb(226,252,193); background: linear-gradient(0deg, rgba(226,252,193,1) 0%, rgba(182,251,176,1) 3%, rgba(204,128,151,1) 49%, rgba(134,133,189,1) 75%, rgba(71,153,222,1) 98%, rgba(0,204,247,1) 100%); } *{ padding: 0; margin: 0; }.fix{ position: fixed; display: flex; align-items: center; justify-content: center; bottom: 0; left: 0; right: 0; height: 150px; background-color: #fff; }.handle{ font-size: 20px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Inte.net Explorer/Edge */ user-select: none; }

 <section class="scroll"></section> <div class="fix"> <p class="handle"></p> </div>

Demo on CodePen

Answer 1

This isn't a Safari bug, I can replicate the "issue" on my OnePlus 6 using Firefox and Chrome. The first touch while the scroll is ongoing stops it, seems like a thing tied to the phone's OS.