Status Update
No update yet.
Comments
th...@google.com
aj...@google.com
aj...@google.com
This repros in Chrome but not in Edge or in ios_web_shell, so it's likely some injected JavaScript from ios/chrome. I'll try to bisect to find which JavaScriptFeature is causing this.
aj...@google.com
This is being triggered by the passive input event listener being added here:
Passive event listeners should not have any effect on anything else, so this is a WebKit bug. It reproduces at least all the way back to iOS 16.0, so the bug isn't recent.
There must be something specific about the structure of this page that is needed to trigger the bug, or else we'd see it on more pages on the web. I'll try to extract a minimal version of the page that would be more useful for debugging in WebKit.
aj...@google.com
I tried extracting a simple version of the page but then the bug no longer reproduces (the click works fine on the first try).
Bug reporter, are you able to share a simple version of the page (e.g., no JS) where this is still reproducible?
mi...@gmail.com
Unfortunately I've been unable to create a very simple version, but I've made some progress. First, to make it easier to test it I have created a reduced version of the merchant's store here:
You can still reproduce the issue by clicking on the big pink buttons.
I have tried to disabled some scripts one by one and found that commenting the {{ content_for_header }} fixes the issue. This {{ content_for_header }} is a Shopify specific syntax that allows Shopify to inject their own scripts (tracking, shared scripts for the platform). Because it is all managed by Shopify I could not disable all their scripts one by one, but it seems to be an incompatibility with one of the script provided by Shopify. But still, it is not reproducible at all on Safari so it is a bit strange.
On this version, I have removed all the scripts from the theme (so some features like drawer navigation won't work), to ensure that it only has the Shopify scripts. The issue seems to be reproducible a bit less than before, but still reproducible on about 70% of my tries (it seems it is easier to reproduce when you do a very fast tap).
aj...@google.com
Thanks for the test case! I've found a workaround that you can add for now:
window.addEventListener('touchstart', ()=>{}, {capture: true, passive: true});
I haven't yet been able to get a small enough test case that would be useful for a WebKit bug, but I agree that the Shopify scripts must be involved somehow.
mi...@gmail.com
aj...@google.com
I tried it on their live store (l left the unpublished copy link with the issue so you can continue the debugging) and it indeed fixes it on the live store
I'm glad it works!
but I have no idea why this is needed.
Since this event listener doesn't do anything when called, my only theory so far is that it has something to do with keeping on triggering the renderer event loop as the user scrolls, but I'm not sure what logic is depending on this.
If possible I would prefer to avoid having this fix included by default.
Yes, agreed, I'd also like to track down the underlying issue in case it's affecting other sites as well.
Description
Steps to reproduce the problem
Problem Description
This store is using one of our theme, and is reproducible 100% of the time. All first click to the links are ignored. I have also tried on our dev store, removing all the JavaScript from the page, but the issue is still reproducible.
Safari on iOS, or Chrome/Safari/Firefox on desktop do not experience this issue, all clicks are constantly followed. I am not sure at all what is happening, I've spent several hours trying to point down why Chrome is behaving this way here, but could not find any reason.
We started receiving several similar reports, so it seems it is a regression but I can't say when exactly.
Summary
First click is ignored on links in iOS.
Custom Questions
Which component does this fall under?
Blink>CSS
Does this work in other browsers?
Yes - This is just a Chrome problem
Additional Data
Category: API
Chrome Channel: Stable
Regression: Yes