Summary: In certain circumstances, touch events are not properly dispatched. Steps to Reproduce: Open the following document in Mobile Safari and tap on the blue area: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1"> <style> main { display: flex; } .foo { flex-basis: 0; } .map { flex-grow: 2; overflow: hidden; position: relative; } .canvas { background-color: blue; } </style> </head> <body> <main> <div class="foo"> <h1>Test</h1> </div> <div class="map"> <div class="container"> <div class="canvas" style="position: absolute; width: 100px; height: 800px;"></div> </div> </div> </main> <script> document.querySelector('.container').addEventListener('touchstart', () => console.log('touch')); </script> </body> </html> Expected Results: "touch" is logged to the console. Actual Results: Nothing is logged. Most perturbations to this test case will cause it to have the expected results: * Removing the viewport meta tag * Reducing the height of the .canvas div to 100px * Removing any of the CSS rules
<rdar://problem/36460221>
Our touch event region computation is wrong with <div class="container">. We should be adding a rect for the child <canvas> but are not. <div class="container"> is actually zero height (visible if you put an outline on it), which is why it isn't clickable.
Created attachment 331234 [details] Testcase
Created attachment 331256 [details] Patch
Fixed in internal code. Test added in https://trac.webkit.org/changeset/226932/webkit Thanks for the report!