[Webkit-unassigned] [Bug 148898] New: Padding of an element BEHIND ignores z-index, blocking clicks for elements IN FRONT.

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Sat Sep 5 04:08:56 PDT 2015


            Bug ID: 148898
           Summary: Padding of an element BEHIND ignores z-index, blocking
                    clicks for elements IN FRONT.
    Classification: Unclassified
           Product: WebKit
           Version: Other
          Hardware: iOS
                OS: iOS 7.1
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: cuentanumerouno at hotmail.com

Seems like the PADDING of an element BEHIND ignores z-index, blocking the clicks for elements IN FRONT.

Elements can't be clicked (links, text, nothing) when falling over the padding of the element behind.

The un-clickable elements are IN FRONT, as per z-index value, so the padding that is blocking them up is BELOW. The padding in the blocking element comes LATER in the code than the blocked elements, but still behaves as if the padding was an actual element in front, preventing the elements before (above as per z-index) from being clickable.

As a result, ALL the navigation items in miamifishing.com are UNCLICKABLE.

How to reproduce it: 

Tested on iPhone5 Safari, iOS 7

Go to miamifishing.com (home page only) and touch “charter info” menu item (at the very right, because the rest is also unclickable). You should get a sub-menu (drop down with css) from which you CAN’T click anything except the last item, which happens to fall over div#page. If you REDUCE the top padding of #page, you can click them all!

It’s like the PADDING of an element BELOW falls ON TOP of elements ABOVE, blocking the clicks.

I removed all the click events for the page with a small script before body (or as below as I could, since google oauth added its script below) and paused all scripts, and the issue persists.

I still don't understand how the rest of elements in header_wrapper are also unclickable, but it seems a similar issue, e.g. "they don't fall over any static element" as it seems to need the case above.

Further test: instead of reducing the top-padding of #page, add a negative top-margin, let's say -400px, to its child or grand-child, and even the invisible content over the padding will make the items inside the drop-down sub-menu clickable.

Sorry I'm not as good programmer to track the hundreds of properties of each element, in the developer tools, but it seems it's no event or property, but just element's surface blocking others.

You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20150905/515d057f/attachment-0001.html>

More information about the webkit-unassigned mailing list