Bug 220899 - long-press/callout - weird foreground/background colors applied to links. bailing out of callout leaves :hover styles sticking
Summary: long-press/callout - weird foreground/background colors applied to links. bai...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-01-24 04:39 PST by Patrick H. Lauke
Modified: 2021-01-28 00:41 PST (History)
9 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Patrick H. Lauke 2021-01-24 04:39:37 PST
First identified as a bug in Bootstrap - see https://github.com/twbs/bootstrap/issues/31315

This seems due to some weird heuristics (which don't seem to be documented anywhere?) of how iOS/Safari decides to style a link when it's being long-pressed, just before the callout/context menu is shown. In the case of Bootstrap, this results in outline button styled links to momentarily have a "white-on-white" style on links, which makes it look like a bug.

Additionally, after bailing out of the callout, iOS/Safari leaves the :hover styles applied until another control is tapped. Is this intentional behavior, or a bug?

reduced test case: https://codepen.io/patrickhlauke/pen/ExgBxwv

video of the bug: https://www.youtube.com/watch?v=_xCNSgieCuY
Comment 1 Smoley 2021-01-27 17:58:02 PST
This does not reproduce for me using the codepen but I can reproduce it using the page shown in the video: getbootstrap.com. I'm seeing it on iOS 13.6.1 as well as the latest 14.4 beta.
Comment 2 Radar WebKit Bug Importer 2021-01-27 17:58:13 PST
<rdar://problem/73688837>
Comment 3 Tim Horton 2021-01-27 18:42:08 PST
(FWIW if anyone wants to dig in, this is all about the background color + snapshot that TextIndicator computes and that we hand to the UITargetedPreview for the long press/context menu/etc. preview; the heuristic is nontrivial, so probably requires debugging to understand what's gone wrong).

Separately, I *believe* that :hover sticking is intentional, that's how our touch-hover adaptation works (otherwise things hidden behind hover are unusable).
Comment 4 Patrick H. Lauke 2021-01-28 00:38:40 PST
On the :hover sticking...I thought there was a heuristic that checked if there was some form of document mutation (new content appearing etc) - but maybe I'm getting confused with the "generate mouse and click events as result of touch" JS handling.
Comment 5 Patrick H. Lauke 2021-01-28 00:41:38 PST
Regarding repro on the codepen - sorry, try the debug view of the pen https://cdpn.io/patrickhlauke/debug/ExgBxwv