Hello,
after the IOS update 18.5, all elements with an touch-event listener inside a wkWebview seem to offset a touch-events origin x and y location by a factor of 0.666. Triggering any other element with an touch-event listener at that location instead. If there is not on an element with an touch-event listener at the offset location, nothing happens. Only if the offset origin is coincidentally still inside the actually touched element, the touch-event gets dispatched correctly. This effects only the event listener: "touchstart", "touchmove" and "touchend". click-event listeners still work, and trigger on the correct element.
Confusing are the contents of the touch-events being dispatched. The attributes "pageX" and "pageY" report the correct position touched, yet "target" gives the (wrong) Element at the offset location. The offset location can be found in "targetTouches[0].pageX" and "targetTouches[0].pageY".
The offset factor can be influenced by the "width" value of this header tag: "<meta name='viewport' content='width=240, user-scalable=no'/>". If the width value is 240 the factor changes to 1.333, and the value 320 actually fixes this offset completely.
Device: Iphone XS with IOS 18.5
<html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> <!--<meta name="viewport" content="width=240, user-scalable=no"/>--> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="format-detection" content="telephone=no"/> <link rel="apple-touch-icon" href="applogo"/> </head> <body> <style> div{ height:70px; width: 100%; margin-top: 7px; background-color: #f7f7f7; } </style> <div id="Feedback" style="background-color:white;font-size:10px;"></div> <div id="A" ontouchstart="insertTouchFeedback">Element A</div> <div id="B">Element B</div> <div id="C">Element C</div> <div id="D">Element D</div> <div id="E">Element E</div> <div id="F">Element F</div> <div id="G">Element G</div> <script> const feedback = document.getElementById("Feedback"); function insertTouchFeedback(event){ const offsetX = event.pageX - event.targetTouches[0].pageX; const offsetY = event.pageY - event.targetTouches[0].pageY; feedback.innerHTML = ` Hit on ${event.pageX}x${event.pageY} <br/> Actually triggers "${event.target.innerHTML}" at ${event.targetTouches[0].pageX}x${event.targetTouches[0].pageY} <br/> Offset ${offsetX}x${offsetY} <br/> Factor ${event.targetTouches[0].pageX / event.pageX} x ${event.targetTouches[0].pageY / event.pageY} `; } document.getElementById("A").addEventListener("touchstart", insertTouchFeedback); document.getElementById("B").addEventListener("touchstart", insertTouchFeedback); document.getElementById("C").addEventListener("touchstart", insertTouchFeedback); document.getElementById("D").addEventListener("touchstart", insertTouchFeedback); document.getElementById("E").addEventListener("touchstart", insertTouchFeedback); document.getElementById("F").addEventListener("touchstart", insertTouchFeedback); document.getElementById("G").addEventListener("touchstart", insertTouchFeedback); </script> </body> </html>
We use WKWebView within Objective-C.
Any idea whet goes wrong would be great! Thanks!
Our engineering teams need to investigate this issue, as resolution may involve changes to Apple's software. Please file a bug report, include a small Xcode project and some directions that can be used to reproduce the problem, and post the Feedback number here once you do. If you post the Feedback number here I'll check the status next time I do a sweep of forums posts where I've suggested bug reports.
Bug Reporting: How and Why? has tips on creating your bug report.