Bug 181566 - Touch events not received with initial-scale=1 viewport
Summary: Touch events not received with initial-scale=1 viewport
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-01-11 16:59 PST by John Firebaugh
Modified: 2018-01-12 17:05 PST (History)
3 users (show)

See Also:


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+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description John Firebaugh 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
Comment 1 Radar WebKit Bug Importer 2018-01-11 21:15:58 PST
<rdar://problem/36460221>
Comment 2 Simon Fraser (smfr) 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.
Comment 3 Simon Fraser (smfr) 2018-01-12 14:05:58 PST
Created attachment 331234 [details]
Testcase
Comment 4 Simon Fraser (smfr) 2018-01-12 16:52:23 PST
Created attachment 331256 [details]
Patch
Comment 5 Simon Fraser (smfr) 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!