<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 - distributed elements not rendering when parent visibility is initially display:none and then toggled"
href="https://bugs.webkit.org/show_bug.cgi?id=158421">158421</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>distributed elements not rendering when parent visibility is initially display:none and then toggled
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</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>paulkinlan@google.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=280594" name="attach_280594" title="actual results - slotted elements are not rendered.">attachment 280594</a> <a href="attachment.cgi?id=280594&action=edit" title="actual results - slotted elements are not rendered.">[details]</a></span>
actual results - slotted elements are not rendered.
I think I have found an issue with Shadow DOM and slotted elements not displaying in WebKit.
I have a <slot> whose parent is hidden (display: none) and toggled later (display:block). When toggled, the elements
that are distributed into the <slot> are not rendered. You have to force a layout/paint via devtools (toggle :active for example)
for it to render the distributed elements.
It looks like that WebKit is making an optimization where it knows initially the distributed elements are not visible so
it doesn't layout the elements, however it doesn't then realise that the parent has been made visible so it doesn't force
a layout and render of the elements.
Demo: <a href="https://jsbin.com/cebura/latest">https://jsbin.com/cebura/latest</a>
Smallest test case: <a href="https://output.jsbin.com/jusuga/latest">https://output.jsbin.com/jusuga/latest</a>
Expected: click the toggle button in Chrome canary with Experiemental web platform features enabled and you will see the distributed h1 is rendered
Actual (WebKit): click the toggle button, nothing rendered. Go to devtools and for a layout (I click :active on the slot and you will see it render)</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>