Amend the "sticky `:hover`/`:focus`" section, deprecate `hover` mixin

[patrickhlauke]

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: #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.

[Herst]

The issue report titled ":hover being sticky on tap makes good multi-input design hard" is still open in Chromium's tracker (and referenced in the wall of bugs), so are you sure that only WebKit has problems there?

(BTW: w3c/pointerevents#123)

[patrickhlauke]

@Herst from testing https://codepen.io/patrickhlauke/pen/EovRPz I didn't get any sticking in Chrome (neither on Android nor on Windows with touch). So I wouldn't be surprised if this had been solved but not closed. @RByers ?

[mdo]

Just pushed #25270. Little tired tonight, so copy and more might need tweaks. Feel free to rip apart with comments or push right to the branch.

[Gekk3]

In my experience most of the sticky or stuck :hover :focus :active problems on mobile were caused by missing <meta name="viewport" content="width=device-width"> and not Bootstrap problem.