Using Luge reveal seems to incur a double tap issue on mobile (iphone)

[christerdk]

Hi,

Pretty much subject. I've been debugging my site for a while because of this, essentially removing anything that could cause the typical a-tag double tap issue (such as hover css effects).

I have narrowed it down to having a luge reveal a bit down on my page. I don't have a repository to share, so I have instead put two versions of the page up on my site for comparison.

How to reproduce - please reproduce only on mobile, as some elements are not the same between mobile and desktop (no issues on desktop):

Page without double tap issue
https://christerostergaard.com - if you scroll a bit down, you will see a testimonial. Below the testimonial there are some suggestions. Tapping one of these suggestions once will take you to the related page. All good.

Page with double tap issue
https://christerostergaard.com/index_w_luge/ This page has a reveal on the testimonial. Scroll down to see suggestions and click one. If issue reproduced correctly, it will require two taps on a suggestion to navigate to the related page. In addition, the links in the menu also require double tap now.

The two page are the same, except for the reveal on the second page. Please note that it doesn't seem to matter that I have a header revealing. It does that a load, however, because it's within the viewport dimensions (at least on my phone, XR). I wonder if it is a timing issue, so later reveals after "page load" will cause this issue?

iOS v15.16.1
Browser: Chrome v110.0.4581.114

[AntoineW]

Hi,
I'm not able to reproduce it on Browserstack.
Anyway, you are not using page transition, which is the only part of luge that would intercept click. Apart from that, I can't find any reason that would cause that, and that's the first time I hear about this issue 🤔
You have some HTML errors, maybe try fixing that first?

[christerdk]

I'm not a front end developer, so that wouldn't surprise me :) Which HTML validator do you use? Ok, I'll give it another go on clearing things out and will return.

A few additions: I couldn't reproduce in the desktop browser while using responsive mode. It's on reproducible on the phone, which makes a little hard to debug.
Also, this remark: I wonder if it is a timing issue, so later reveals after "page load" will cause this issue?
While I still maintain that there is some relation ship (pending any HTML error fixes), I do use luge on the tags later. So it's kind of interesting that it occurs specifically when the testimonial has a reveal.

[AntoineW]

You can use https://validator.w3.org/ for HTML validation.
I did a test on a real device, through Browserstack, but I couldn't reproduce it.

Do you mean that you add the luge attributes after the page load, from a JS code? Or did you add them in the HTML code directly?