[Webkit-unassigned] [Bug 119556] New: iOS: Jumping on :active press (when zoomed) with: touchstart + webkit-backface-visibility: hidden + text-shadow

Wed Aug 7 11:40:37 PDT 2013

https://bugs.webkit.org/show_bug.cgi?id=119556

           Summary: iOS: Jumping on :active press (when zoomed) with:
                    touchstart + webkit-backface-visibility: hidden +
                    text-shadow
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Other
               URL: http://cdpn.io/pknez
        OS/Version: Other
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: WebKit2
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: webkitbugs at rmnet.com

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>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.