<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 - Feature request: Animating max-height / height based on content"
href="https://bugs.webkit.org/show_bug.cgi?id=155704">155704</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Feature request: Animating max-height / height based on content
</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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>craig+webkit@craigfrancis.co.uk
</td>
</tr></table>
<p>
<div>
<pre>When creating a disclosure widget:
<p><a href="#widget">Show Terms &amp; Conditions</a></p>
<div id="widget">
<p>Long legal text, hidden by default.</p>
</div>
Developers used to use jQuery to display the hidden content with a height changing animation (so the content did not suddenly appear):
$('#widget').slideToggle();
More recently we have been using CSS animations:
#widget {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
}
#widget.closed {
max-height: 0;
}
<a href="https://davidwalsh.name/css-slide">https://davidwalsh.name/css-slide</a>
Where `max-height` has to be guessed (not too high, as the animation will be too fast, and not too small, as content will be unreadable).
So can we take the `max-content` suggestion for the auto-resizing iframe, and allow it to work on the `max-height` or `height` properties:
#widget {
max-height: max-content;
}
-----
This is related to the iframe and textarea resize requests:
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Feature request: Auto-resize iframes based on content"
href="show_bug.cgi?id=153952">https://bugs.webkit.org/show_bug.cgi?id=153952</a>
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Feature request: Auto-resize textarea"
href="show_bug.cgi?id=155703">https://bugs.webkit.org/show_bug.cgi?id=155703</a>
<a href="https://github.com/craigfrancis/iframe-height">https://github.com/craigfrancis/iframe-height</a></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>