<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 - Padding of an element BEHIND ignores z-index, blocking clicks for elements IN FRONT."
href="https://bugs.webkit.org/show_bug.cgi?id=148898">148898</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Padding of an element BEHIND ignores z-index, blocking clicks for elements IN FRONT.
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Other
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 7.1
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</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>cuentanumerouno@hotmail.com
</td>
</tr></table>
<p>
<div>
<pre>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.</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>