Popovers sometimes dismiss immediately on iOS

[HarshilShah]

Hi there, I’ve been using Littlefoot on my personal site and noticed that on iOS there’s a weird issue where sometimes the popover dismisses immediately after activation. I haven’t been able to narrow down the repro conditions but I can consistently get it to repro.

To test this, you can visit this blog post on my site and either any of the footnotes on there. One thing I’ve noticed is the first invocation always dismisses immediately, at least in my testing.

I’m running an older version right now (v2.0.3) however updating to the latest (v3.2.1) didn’t really help; it’s somewhat worse with it even: automatic dismissals are even more common, and the animation is often skipped entirely, for both the button and the popover.

I can’t find a vanilla or Gatsby-based demo site for Littlefoot anywhere so it’s hard to tell if this issue is general to the project or something to do with using it in Gatsby as I am.

[goblindegook]

Thanks for reporting. I can reproduce it on your site, although only infrequently, it seems to occur more often when the popover has already been triggered before. I will investigate further.

This Gatsby site uses littlefoot as well, here's a page with footnotes: https://fantasticmetropolis.com/i/squid. I don't get the same behaviour here that I get on yours, though.

[HarshilShah]

Looking into it a bit more even on my site and it gets weirder.

In that same blog post I have another footnote in the third paragraph, and that always behaves as expected. If I add any other footnotes, however, before or after that one, they all show the same immediate dismiss behaviour.

[HarshilShah]

Quick follow-up: I‘d been duplicating the tag for the first footnote while trying to recreate the bug, I tried another with the second one and that works okay. So I replaced the text of the first footnote with that from the second and that seems to fix the issue. Gonna look into this more and post what I find here but seems like something about the text is the issue.

[HarshilShah]

I think I’ve got it. I tried removing suspect characters, checking for invisibles etc. but nothing worked. Then I noticed the footnote that works has a link and this one doesn’t. So I added a link here and now it works too. Any ideas what the actual issue might be?

[goblindegook]

When you say the footnote has a link, you mean the original HTML? Can you post a snippet, please?

[HarshilShah]

Yep, markdown rather, but still. The two footnotes are as below:

[^image-count]: The two wallpapers bundled with Mojave, the eponymous “Mojave” and “Solar Gradients”, include 16 images each.

[^nocturnal-plug]: I switch between themes enough that I even made my first Mac app, [Nocturnal][nocturnal-link], to make it easier to do so.

[nocturnal-link]: https://github.com/HarshilShah/Nocturnal "View Nocturnal on GitHub"

All instances of [^nocturnal-plug] with the link work, all instances of [^image-count] dismiss unless I add a link somewhere.

[goblindegook]

That is weird. I haven't been able to replicate it yet on my side.

[HarshilShah]

Yeah it’s a tricky one, I’m gonna try whittling down all other code around there to see if the culprit is some weird interaction with some other code.

The site is closed source (my JS skills aren’t good enough to inflict upon the world yet), but I’d be happy to give you access to the source if you’d like to play around too.

[HarshilShah]

I just remembered a similar issue I’d run into a while ago and thought I’d test it out. I made the template element based on an anchor instead of a button and that seems to fix the issue for the most part. Footnotes show up as expected like 90% of the time as compared to 10% earlier, however there’s this one new weird issue where if I open and close the same footnote a bunch of times, it sometimes stops opening again, and I need to either scroll around or activate another footnote for it to start working again.

The issue is mostly fixed for me so feel free to close this, but alternatively might be worth seeing if it’s possible to fix this while still using a more semantically correct button tag.

[goblindegook]

Thanks for the update, @HarshilShah. I'll keep this open as I feel there are some improvements to be made on the click handling. Could also be button element semantics, as you say.

The new issue you're seeing is likely the button state getting incorrectly set as there is a delay between clicking and actual popover (de)activation. If you set all the delay options to 0, do you still see it?

[HarshilShah]

I’d previously only set the dismissDelay to 0, setting the hoverDelay to 0 too seems to fix the issue but I can’t be sure because it’s just hard to replicate. Things go really awry if I set the activateDelay to 0 though; the popover disables barely into the presentation animation.

[goblindegook]

That's odd. hoverDelay only takes effect when activateOnHover or dismissOnUnhover are on, and that didn't seem to be the case from your site's example.

Now I'm wondering if there's a bug with hover events being incorrectly triggered, which could explain the behaviour you reported.

[HarshilShah]

Yep I have both of those disabled. Come to think about it I do remember the button getting stuck in the hover state sometimes, that might just be it.