Bug 181566

Summary: Touch events not received with initial-scale=1 viewport
Product: WebKit Reporter: John Firebaugh <john.firebaugh>
Component: UI EventsAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: simon.fraser, thorton, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: iPhone / iPad   
OS: iOS 11   
Attachments:
Description Flags
Testcase
none
Patch thorton: review+

John Firebaugh
Reported 2018-01-11 16:59:38 PST
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
Attachments
Testcase (1.14 KB, text/html)
2018-01-12 14:05 PST, Simon Fraser (smfr) 		no flags
Details
Patch (4.37 KB, patch)
2018-01-12 16:52 PST, Simon Fraser (smfr) 		thorton: review+
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-01-11 21:15:58 PST
<rdar://problem/36460221>
Simon Fraser (smfr)
Comment 2 2018-01-12 14:05:45 PST
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.
Simon Fraser (smfr)
Comment 3 2018-01-12 14:05:58 PST
Created attachment 331234 [details] Testcase
Simon Fraser (smfr)
Comment 4 2018-01-12 16:52:23 PST
Created attachment 331256 [details] Patch
Simon Fraser (smfr)
Comment 5 2018-01-12 17:05:03 PST
Fixed in internal code. Test added in https://trac.webkit.org/changeset/226932/webkit Thanks for the report!
Note You need to log in before you can comment on or make changes to this bug.