Document sticky :hover on mobile browsers; fixes #12832

This commit is contained in:
Chris Rebert 2015-01-20 19:22:20 -08:00
parent d9f437f4ec
commit 2e20e67dc1
2 changed files with 4 additions and 0 deletions

View File

@ -164,6 +164,9 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<h3 id="support-browser-zooming">Browser zooming</h3>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
<h3 id="support-sticky-hover-mobile">Sticky <code>:hover</code>/<code>:focus</code> on mobile</h3>
<p>Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make <code>:hover</code> "sticky". In other words, <code>:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's <code>:hover</code> states to become unwantedly "stuck" on such browsers. Some mobile browsers also make <code>:focus</code> similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.</p>
<h3 id="support-printing">Printing</h3>
<p>Even in some modern browsers, printing can be quirky.</p>
<p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p>

View File

@ -56,6 +56,7 @@
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>
<li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
<li><a href="#support-browser-zooming">Browser zooming</a></li>
<li><a href="#support-sticky-hover-mobile">Sticky :hover/:focus on mobile</a></li>
<li><a href="#support-printing">Printing</a></li>
<li><a href="#support-android-stock-browser">Android stock browser</a></li>
<li><a href="#support-validators">Validators</a></li>