UNCONFIRMED 119556
iOS: Jumping on :active press (when zoomed) with: touchstart + webkit-backface-visibility: hidden + text-shadow 
https://bugs.webkit.org/show_bug.cgi?id=119556
Summary iOS: Jumping on :active press (when zoomed) with: touchstart + webkit-backfac...
ar
Reported 2013-08-07 11:40:17 PDT
TEST CASE: http://cdpn.io/pknez TEST IN: Mobile Safari 6.1.3 (10B329) (Sorry, I don't have iOS 7, so I haven't been able to confirm that it's still there.) STEPS: 1. Add "touchstart" EventListener to the <body> of a page. - The goal is to allow styling of the :active pseudo class for links on mobile devices. - See: - http://stackoverflow.com/q/3885018/ - http://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/ - **This bug only effects mobile devices**. 2. Style (css) the a:active with a "text-shadow". 3. Add "-webkit-backface-visibility: hidden;" to the *parent* (any parent) of the <a>. - This was added to fix another bug. I have stuff on the page fadeIn onLoad via webkit-transition. Without adding this, the text would fade to 100% and then extra anti-aliasing would be added. Not only did I not want the extra anti-aliasing, but the sudden change was jarring and ugly. - See: <http://davidwalsh.name/translate3d> 4. Pinch to zoom in on the text. Zoom In a lot. - The bug starts at a certain zoom level and continues all the way until your zoomed in all the way. - The zoom level is a *must* to reproduce this. If you're zoomed too far out the bug doesn't show up. Best to zoom in all the way and then back out a little bit at a time to see when it stops. - Apologies for not being able to force the text case into the perfect zoom to reproduce. 5. Tap or Tap + Hold on one of the links marked "BUG (jumps)" RESULT: - Watch the text jump about 1.5em UP. As if part of the a:active was "top: -1.5em". - The link still works and the a:active styling is applied. EXPECTED: No jumping at certain zoom levels. NOTES: - I found the bug because of the text-shadow I added. I tired to reproduce with other CSS3 properties but couldn't. I still doubt this is isolated to text-shadow... But maybe. - I've done a bunch of testing with this and found a few configurations that can overcome this bug at the exact same zoom level. Basically changing the selector of "-webkit-backface-visibility: hidden;" or adding "position: relative". - Hopefully the test case is pretty self explanatory. But just incase it isn't, here's a quick overview: - Applying "-webkit-backface-visibility: hidden;" to the parent = BUG - Applying "-webkit-backface-visibility: hidden;" directly to the <a> = NO BUG - Applying "-webkit-backface-visibility: hidden;" to the parent AND adding "position: relative" directly to the <a> = NO BUG. - This happens in Mobile Chrome as well: 28.0.1500.16 - Reported there as well: <https://code.google.com/p/chromium/issues/detail?id=269661>
Attachments
Add attachment proposed patch, testcase, etc.
Note You need to log in before you can comment on or make changes to this bug.