| Summary: | :active behavior for touch depends on the presence of touch event handlers | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Rick Byers <rbyers> |
| Component: | UI Events | Assignee: | Benjamin Poulain <benjamin> |
| Status: | ASSIGNED --- | ||
| Severity: | Normal | CC: | linma, vasko.dinkov |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | iOS 8.1 | ||
|
Description
Rick Byers
2014-11-17 17:31:30 PST
Thanks for filing this. In the docs we have this: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html ------- You can also use the -webkit-tap-highlight-color CSS property >>>in combination with setting a touch event<<< to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the :active pseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element as follows: <button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);">Testing Touch on iOS</button> Now when the button is tapped and held on iOS, the button changes to the specified color without the surrounding transparent gray color appearing. ------- Currently in iOS (just confirmed in 8.1 but I believe it's the same in 9), when any touch* event is set to the document (or any parent container) all child elements are also affected and start showing the :hover/:active styles immediately if we touch them even if we just want to scroll the page. This can be quite annoying on specific pages where :hover/:active styles are applied on big elements and even more when transitions, etc. are used (example: scroll to the footer of http://phonegap.com/ and then try scrolling the page up by touching any of the big white links). This issue affects large amount of websites and popular frameworks like jQuery mobile, etc. I don't see any logic why setting any touch* event handler to an element would trigger this behavior change. This looks more like an actual documented hack. It would have been much better if, for example, a vendor prefixed -webkit-* CSS property was introduced for the purpose instead. IMHO it should be fixed like in Chrome/Android with the timeout logic Rick Byers describes above. According to my testing it works really well the way they've implemented it. Here is a simple html that shows the problem.
<html>
<style>
button {
-webkit-tap-highlight-color: transparent;
}
button:active {
background-color: red;
}
</style>
<body>
<button>Button</button>
</body>
</html>
On iOS, the button doesn't become red when pressed. All other platforms handles :active properly, Safari on iOS is alone in this behaviour.
Out of curiosity, is this bug still being considered?
|