<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - :hover is sticky on iOS, even on touch-friendly webpages"
href="https://bugs.webkit.org/show_bug.cgi?id=158517">158517</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>:hover is sticky on iOS, even on touch-friendly webpages
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@chrisrebert.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Steps to reproduce:
1. Open <a href="http://output.jsbin.com/nepisob/quiet">http://output.jsbin.com/nepisob/quiet</a> in iOS 9.3.2 Safari.
2. Tap the cyan "H" button.
3. Ensure your fingers are no longer touching the screen.
Expected result:
The "H" button should be cyan.
Actual result:
The "H" button is red,
indicating that the :hover pseudo-class is still matching.
Sampling of original Bootstrap issues:
* <a href="https://github.com/twbs/bootstrap/issues/10828">https://github.com/twbs/bootstrap/issues/10828</a>
* <a href="https://github.com/twbs/bootstrap/issues/12692">https://github.com/twbs/bootstrap/issues/12692</a>
* <a href="https://github.com/twbs/bootstrap/issues/12832">https://github.com/twbs/bootstrap/issues/12832</a>
Related radars:
<rdar://problem/15100108>
See also:
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">https://bugs.chromium.org/p/chromium/issues/detail?id=370155</a>
Details:
Mobile WebKit makes the :hover CSS pseudo-class "sticky"
(i.e. continue to match a tapped element until another clickable element gets tapped)
in order to accommodate legacy webpages which were only designed with desktop browsers in mind
and thus have e.g. menus or tooltips which only appear on hover. Without this stickiness,
since touch devices don't typically physically support a real hovering interaction,
such widgets would frustrating or impossible for users on touch devices to deal with.
Making :hover sticky on such pages is perfectly reasonable.
However, modern webpages are usually designed to account for mobile/touch devices,
and thus avoid critical hover-only interactions. Many such pages are mobile-first rather
than mobile-only, and thus wish to still use :hover (correctly) to slightly enhance the
experience of desktop users. The typical example is wanting to change a button's styling
on :hover, as an affordance to indicate that it's an interactive button.
However, :hover stickiness causes the buttons on these webpages to get stuck in
a hovered/selected state after a tap on them has completed,
thus confusing the user (and frustrating designers).
Currently, the only decent known workaround is to use a JS library such as
what-input (<a href="https://github.com/ten1seven/what-input">https://github.com/ten1seven/what-input</a> , <a href="http://ten1seven.github.io/what-input/">http://ten1seven.github.io/what-input/</a> )
to track the user's input modality, and make all :hover styles conditional upon a mouse modality.
This adds an extra JS dependency, adds a CSS build step (or requires constant discipline when authoring CSS),
and may not be robust to the future addition of more input modalities to the Web® Platform™.
It is thus a very suboptimal workaround.
Therefore, it would be nice if there was some mechanism for webpages to opt out of sticky :hover.
(e.g. Perhaps rules similar to those that enable fast-tapping; <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">https://webkit.org/blog/5610/more-responsive-tapping-on-ios/</a> )</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>