<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 - position fixed elements with border styles don't render properly with slight finger gesture for scroll at top of document"
href="https://bugs.webkit.org/show_bug.cgi?id=161082">161082</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>position fixed elements with border styles don't render properly with slight finger gesture for scroll at top of document
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</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>andrew.rousset@pearson.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Here's a JSFiddle page that has an example page that exhibits this issue: <a href="https://jsfiddle.net/xg1by4fn/">https://jsfiddle.net/xg1by4fn/</a>
Steps to reproduce:
1) Load JSFiddle or similar HTML document in Safari 9.
2) Lightly touch drag down anywhere on HTML body (lower right hand corner of jsfiddle) without triggering elastic scrolling at top of document. *NOTE* Scrollbar should appear and not fade after this step is completed.
3) Click "Hide Element" button.
4) Click "Show Element" button.
After the steps are completed the element will not be rendered, despite having its display set to block. Disabling all three of the example border styles (box-shadow/border-radius/border) will bring the element back into view as it is properly rendered without these styles. However, toggling any of the three styles will improperly render the element and hide it again.</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>