1258216 - Feature request: Animating max-height / height based on content

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Craig Francis]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Steps to reproduce:

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;
    }

    https://davidwalsh.name/css-slide

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:

https://bugzilla.mozilla.org/show_bug.cgi?id=1246423
https://bugzilla.mozilla.org/show_bug.cgi?id=1258214
https://github.com/craigfrancis/iframe-height