<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 - Webkit not recalculating width when changing height of absolute-positioned div with image"
href="https://bugs.webkit.org/show_bug.cgi?id=152588">152588</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Webkit not recalculating width when changing height of absolute-positioned div with image
</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>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</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>lugnuts25@gmail.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=267987" name="attach_267987" title="Page that demonstrates bug">attachment 267987</a> <a href="attachment.cgi?id=267987&action=edit" title="Page that demonstrates bug">[details]</a></span>
Page that demonstrates bug
StackOverflow issue, has an example you can run:
<a href="http://stackoverflow.com/questions/34506314/webkit-bug-rendering-image-in-centered-absolute-div">http://stackoverflow.com/questions/34506314/webkit-bug-rendering-image-in-centered-absolute-div</a>
Basically I have a relatively position div, with a absolutely positioned div child. Inside the absolutely positioned div is a (square) image:
<div relative>
<div absolute>
<img />
</div>
</div>
Both absolute and img have height: 100%, so when relative changes height, so should both children. The image should then recalculate it's width to preserve it's aspect ratio, which in turn will change its parent (absolute) to change width. However, when relative's height is changed (via javascript or the debugger) the widths are not properly updated. If relative's height is decreased, no widths are recalculated and the image becomes squished vertically. if relative's height is increased, the image's width is increased to maintain the aspect ratio, but its parent (absolute) does not increase width, causing the image to overflow and be displaced to the right (in the example, it should stay centered).
Attached is an example page that shows this bug (also included in the stackoverflow).</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>