ampproject / ampproject/samples

Click handler doesn't work properly in Safari

Open
#92 5 comments 0 reactions 0 assignees View on GitHub
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`).

![amp-document-1](https://user-images.githubusercontent.com/1233407/33931899-b77d0178-dff1-11e7-933c-f0b459a585ec.png)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.