diff options
| author | Patrick H. Lauke <[email protected]> | 2018-01-11 09:51:44 +0000 |
|---|---|---|
| committer | GitHub <[email protected]> | 2018-01-11 09:51:44 +0000 |
| commit | 2e15b9488874d8c129e6bd4da0425ecbac359c03 (patch) | |
| tree | 7d1f864ee73eba84ca6ffa1dedc3a391a254b53f /docs | |
| parent | bfceedc84a75a97b1b5b26316c6368a3a5d2014a (diff) | |
| download | bootstrap-2e15b9488874d8c129e6bd4da0425ecbac359c03.tar.xz bootstrap-2e15b9488874d8c129e6bd4da0425ecbac359c03.zip | |
Remove `touch-action:manipulation` click optimization (#25250)
Due to a severe performance bug in Chrome (see https://bugs.chromium.org/p/chromium/issues/detail?id=800522) and due to the fact that (with the exception of IE/Edge on Windows desktop with touchscreen) all modern browsers now optimize the click delay away anyway, this optimization is not needed.
Closes https://github.com/twbs/bootstrap/issues/24670
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/content/reboot.md | 16 |
1 files changed, 1 insertions, 15 deletions
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 309391fd6..de6dc23a3 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -363,18 +363,4 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} -To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. - -## Click delay optimization for touch - -Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive. - -Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) [prior to iOS 9.3](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/). - -On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here. - -To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay. - -In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. - -For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
\ No newline at end of file |
