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

UNCONFIRMED
Unassigned

Status

()

--
enhancement
UNCONFIRMED
3 years ago
3 years ago

People

(Reporter: craig, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
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

Updated

3 years ago
Severity: normal → enhancement
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
You need to log in before you can comment on or make changes to this bug.