iOS Safari long-press / callout on btn-outline styled links causes temporarily unreadable white-on-white styles

[mohsen1]

Notice the button label after pop over is closed

https://gfycat.com/presentgoldendore

[patrickhlauke]

suspect this is something to do with -webkit-tap-highlight-color and similar proprietary/non-standard CSS rules for Safari/WebKit

[mdo]

Tried removing the tap highlight in #32792 and I still see the same problem on those homepage buttons.

[patrickhlauke]

Tried a variety of things (from setting explicit backgrounds to the outline button styles, to removing the tap highlighting suppression, even down to suppressing the -webkit-touch-callout altogether, which completely breaks users' ability to open a link in a new tab etc) ... but nothing really works. at this stage it looks like a weird quirk (triggered by some unknown combination of styles we use) in Safari, which seems to use some weird heuristic to determine which foreground/background colour it should use for its long-press callout (and then leaves some focus/hover styles hanging until you tap somewhere else if you bail out). Wonder if @graouts has the time/inclination to work out what's going on here...

[patrickhlauke]

youtube video of the issue, which also shows that the :focus/:hover style "sticks" if the user bails out of the callout, until the user taps anywhere else on the page. https://www.youtube.com/watch?v=_xCNSgieCuY

[smfr]

Would be good to file a bug at bugs.webkit.org for this.

[patrickhlauke]

Would be good to file a bug at bugs.webkit.org for this.

@smfr bug filed https://bugs.webkit.org/show_bug.cgi?id=220899 - also made a reduced test case https://codepen.io/patrickhlauke/pen/ExgBxwv

[XhmikosR]

@mdo @patrickhlauke do we close this as a browser bug and subsequently #32792?

[patrickhlauke]

we don't list/maintain known browser bugs anymore, right?

but yeah i'd say close it and #32792

[XhmikosR]

Not anymore since basically v3. v4 does have the Wall of Browser Bugs page but it's basically unmaintained and removed in v5.