<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 - When transformed element has a reflection, children with backface-visibility produces opposite effect"
href="https://bugs.webkit.org/show_bug.cgi?id=161299">161299</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>When transformed element has a reflection, children with backface-visibility produces opposite effect
</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>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</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>New Bugs
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>nathan@maxmo.net
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=287230" name="attach_287230" title="HTML and CSS to reproduce the issue">attachment 287230</a> <a href="attachment.cgi?id=287230&action=edit" title="HTML and CSS to reproduce the issue">[details]</a></span>
HTML and CSS to reproduce the issue
This came up while I was looking into another bug involving backface visibility. If a containing element has a 3D transform and a reflection, then backface-visibility: hidden produces the reverse effect for contained elements (that is, elements that should be hidden are visible and elements that are visible should be hidden).
The attached HTML file provides an illustration of this. box1 and box3 should be visible (and are if the reflection is removed), while box2 should be hidden (and is if the reflection is removed).</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>