| Summary: | Touch events not received with initial-scale=1 viewport | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | John Firebaugh <john.firebaugh> | ||||||
| Component: | UI Events | Assignee: | 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: |
|
||||||||
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! |
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