ampproject / ampproject/samples
Click handler doesn't work properly in Safari
- Dominant language
- HTML
- Stars
- 452
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
Hi, I'm developer working for NetMoms.de and we create new PWA app using AMP for WordPress contents (AMP in PWA pattern). Since we're SPA (build in ReactJS) we depend on `amp-document`.
We use `amp-document`'s click listener to load other AMP pages without escaping from PWA (basically we check clicked link's URL and take WP post slug from it and push it to React Router's history - so PWA URL changes, new AMP document is being requested but we're still inside SPA/PWA).
However we've noticed some issues with Safari (iOS as well on macOS).
It looks like click listener doesn't see a anything from ShadowDOM.
It receives event which target is shadow root and not exactly clicked element. Since Safari doesn't support `event.path` you use pollyfill https://github.com/ampproject/amp-publisher-sample/blob/master/amp-pwa/src/components/amp-document/amp-document.js#L208 while debugging inside while-statement it confirmed that `event.target` is shadow root element (I clicked `img` element inside `figure`, `article`, `a` (and other parents) but in Safari I only see nodes from shadowRoot up to `html` root (in fact 6x `div`, `body` and `html`).

ShadowDOM in our case is open as I've commented out closing it in https://github.com/ampproject/amp-publisher-sample/blob/master/amp-pwa/src/components/amp-document/amp-document.js#L222 due to some other requirements.
Tested on: Safari v11.0.2 & macOS High Sierra 10.13.2 but it also happens in iOS devices.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.