twbs--bootstrap/scss
Patrick H. Lauke 6d64afe508 Replace dropdown backdrop hack with cleaner JS-only hack
* 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
2017-04-14 09:19:00 +01:00
..
mixins Update card outline mixin 2017-04-08 21:25:38 -07:00
utilities Revert "Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)" 2017-04-08 15:15:14 -07:00
.scss-lint.yml
_alert.scss
_badge.scss
_breadcrumb.scss
_button-group.scss Rename some .open to .show (#22389) 2017-04-08 16:30:18 -07:00
_buttons.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_card.scss fixes #22135 2017-04-08 21:26:25 -07:00
_carousel.scss property order 2017-04-08 16:29:21 -07:00
_close.scss
_code.scss
_custom-forms.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_custom.scss
_dropdown.scss Replace dropdown backdrop hack with cleaner JS-only hack 2017-04-14 09:19:00 +01:00
_forms.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_grid.scss css: .container-fluid 100% 2017-04-03 08:59:33 -07:00
_images.scss
_input-group.scss Revamp button and input vars while fixing #21587 (#22287) 2017-03-28 09:28:27 -07:00
_jumbotron.scss Drop .jumbotron-hr 2017-04-08 14:21:18 -07:00
_list-group.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_media.scss
_mixins.scss Ensure carousel works in IE10/11 2017-04-08 16:29:21 -07:00
_modal.scss
_nav.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_navbar.scss Rename some .open to .show (#22389) 2017-04-08 16:30:18 -07:00
_pagination.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_popover.scss Fix popover arrow color for bottom position 2017-04-13 10:52:41 +02:00
_print.scss
_progress.scss Add transition to .progress-bar 2017-04-08 14:40:35 -07:00
_reboot.scss Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
_responsive-embed.scss
_tables.scss fixes rest of #21585; adds custom styles for inverse table accent hover and active states 2017-03-19 18:39:48 -07:00
_tooltip.scss
_transitions.scss
_type.scss
_utilities.scss
_variables.scss Replace dropdown backdrop hack with cleaner JS-only hack 2017-04-14 09:19:00 +01:00
bootstrap-grid.scss
bootstrap-reboot.scss
bootstrap.scss