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,:hoverstyles 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.