mirror of
https://github.com/Hopiu/bootstrap.git
synced 2026-03-19 14:00:24 +00:00
6d64afe508
* Replace backdrop with simple noop mouse listener As discussed in https://github.com/twbs/bootstrap/pull/22422 the current approach of injecting a backdrop (to work around iOS' broken event delegation for the `click` event) has annoying consequences on touch-enabled laptop/desktop devices. Instead of a backdrop `<div>`, here we simply add extra empty/noop mouse listeners to the immediate children of `<body>` (and remove them when the dropdown is closed) in order to force iOS to properly bubble a `click` resulting from a tap (essentially, method 2 from https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html) This is sufficient (except in rare cases where the user does manage to tap on the body itself, rather than any child elements of body - which is not very likely in an iOS phone/tablet scenario for most layouts) to get iOS to get a grip and do the correct event bubbling/delegation, meaning the regular "click" event will bubble back to the `<body>` when tapping outside of the dropdown, and the dropdown will close properly (just like it already does, even without this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and Windows on a touch laptop). This approach, though a bit hacky, has no impact on the DOM structure, and has no unforeseen side effects on touch-enabled laptops/desktops. And crucially, it works just fine in iOS. * Remove dropdown backdrop styles * Update doc for dropdowns and touch-enabled devices |
||
|---|---|---|
| .. | ||
| mixins | ||
| utilities | ||
| .scss-lint.yml | ||
| _alert.scss | ||
| _badge.scss | ||
| _breadcrumb.scss | ||
| _button-group.scss | ||
| _buttons.scss | ||
| _card.scss | ||
| _carousel.scss | ||
| _close.scss | ||
| _code.scss | ||
| _custom-forms.scss | ||
| _custom.scss | ||
| _dropdown.scss | ||
| _forms.scss | ||
| _grid.scss | ||
| _images.scss | ||
| _input-group.scss | ||
| _jumbotron.scss | ||
| _list-group.scss | ||
| _media.scss | ||
| _mixins.scss | ||
| _modal.scss | ||
| _nav.scss | ||
| _navbar.scss | ||
| _pagination.scss | ||
| _popover.scss | ||
| _print.scss | ||
| _progress.scss | ||
| _reboot.scss | ||
| _responsive-embed.scss | ||
| _tables.scss | ||
| _tooltip.scss | ||
| _transitions.scss | ||
| _type.scss | ||
| _utilities.scss | ||
| _variables.scss | ||
| bootstrap-grid.scss | ||
| bootstrap-reboot.scss | ||
| bootstrap.scss | ||