Amend the "sticky `:hover`/`:focus`" section, deprecate `hover` mixin
On https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile it says
Even though real hovering isn’t possible on most touchscreens, most mobile browsers emulate hovering support and make
:hover
“sticky”. In other words,:hover
styles start applying after tapping an element and only stop applying after the user taps some other element.
This is not completely correct. Currently, it seems that only iOS/Safari (and other iOS browsers using WebKit) has issues with sticky :hover
under certain conditions. Seems limited to links, buttons. Here, :hover
style remains applied, and other styles like :focus
and :active
are ignored. :focus
does "stick" in all mobile browsers, even in iOS for controls like "faked" <span ...>
based buttons or similar.
The prose itself, if we want to keep it, would need some rejigging, making it clear that :hover
stickyness is an iOS/Safari only problem.
The workaround mentioned - relating to the hover
mixin, is currently commented out and non-working. We should just remove mention of it (perhaps include some other advice, or just that we're not doing anything special here to prevent this sticking at this stage). And deprecate the mixin properly (@mdo mentioned "@include hover { }
just returns a normal :hover
?").
Related: https://github.com/twbs/bootstrap/issues/25182
Hoping that for 4.1 we can experiment with using the upcoming :focus-visible
https://drafts.csswg.org/selectors-4/#the-focusring-pseudo pseudo-class with polyfill, to fix sticky :focus
as a result of touch (and mouse). And that hopefully we can find an iOS/Safari specific hack or workaround to fix the sticky :hover
that occurs in certain situations just on this platform.