From 2e20e67dc1f1923ee144c5588ab0f686e4bdd130 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Tue, 20 Jan 2015 19:22:20 -0800
Subject: [PATCH] Document sticky :hover on mobile browsers; fixes #12832

---
 docs/_includes/getting-started/browser-device-support.html | 3 +++
 docs/_includes/nav/getting-started.html                    | 1 +
 2 files changed, 4 insertions(+)

diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html
index b5a2d892d2..b27099aa60 100644
--- a/docs/_includes/getting-started/browser-device-support.html
+++ b/docs/_includes/getting-started/browser-device-support.html
@@ -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>
diff --git a/docs/_includes/nav/getting-started.html b/docs/_includes/nav/getting-started.html
index b06dcce9b2..4a07fe79c7 100644
--- a/docs/_includes/nav/getting-started.html
+++ b/docs/_includes/nav/getting-started.html
@@ -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>