Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #25195
Closed
Open
Issue created Jan 04, 2018 by Patrick H. Lauke@patrickhlaukeContributor

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.

Assignee
Assign to
Time tracking