diff options
| author | Patrick H. Lauke <[email protected]> | 2017-04-14 09:19:00 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-04-14 09:19:00 +0100 |
| commit | 6d64afe508bfd0bcfb5831a9a4708cef4ad88334 (patch) | |
| tree | e42caa655ffa11b5ea8d4dc50340682628a9fd46 /scss | |
| parent | 3b3366e1b6ab30acd8cb468fb6570cca1b38f01e (diff) | |
| download | bootstrap-6d64afe508bfd0bcfb5831a9a4708cef4ad88334.tar.xz bootstrap-6d64afe508bfd0bcfb5831a9a4708cef4ad88334.zip | |
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
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_dropdown.scss | 10 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 |
2 files changed, 0 insertions, 11 deletions
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 116a84a3b..3c5a5c66e 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -135,16 +135,6 @@ white-space: nowrap; // as with > li > a } -// Backdrop to catch body clicks on mobile, etc. -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-dropdown-backdrop; -} - // Allow for dropdowns to go bottom up (aka, dropup-menu) // // Just add .dropup after the standard .dropdown class and you're set. diff --git a/scss/_variables.scss b/scss/_variables.scss index 957e69d5c..dd5062b8b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -555,7 +555,6 @@ $dropdown-header-color: $gray-light !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown-backdrop: 990 !default; $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; |