[chearon]

The browser doesn't know what the auto size is any more than you do until it performs a layout (reflow). Layouts are expensive and must be minimized. And what if content is changed in the middle of the transition? Should it recalculate the new auto size? Maybe we will get it some day, but there are good reasons to be cautious.

I'd go as far as saying layout properties like `height` and `font-size` shouldn't even be animated. If you pay attention to animations on macOS or iOS, the animations are performed on post-layout pixels: scaling and translating. That gets you very smooth FPS and isn't thrashing the CPU.

[c-smile]

> Animate to Auto

Sciter supports animate to min/max-content. This

   div {
     height:0;
     overflow-y:hidden; 
     transition: height ease 300ms;
   }        

   button:checked + div {
      height:min-content;
   }     

will animate the following:

      <button|checkbox checked>Show/hide</button>
      <div>
        This is a summary
      </div>

so technically that's possible. And browsers are in principle capable of doing that too if they support animation in <summary>/<details>

[genuine_smiles]

> And browsers are in principle capable of doing that too if they support animation in <summary>/<details>

Do any of them do this? On my iPad right now the MDN example (1) isn’t animating, and last time I checked Chrome didn’t either.

(1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...

[kyleyeats]

Love this comment. In general I think developers shouldn't change the height of things, animation or no. If you're using vh then the page shouldn't have a scrollbar at all. You should only ever use it to fit your whole UI on one screen.

I actually can't imagine any other use for vh that isn't related to screenjacking (giving you a "full screen experience" mid-article) or scrolljacking (changing how the page scrolls). Parallax effects, maybe? I like the current limitations.

[reflectiv]

> I actually can't imagine any other use for vh that isn't related to screenjacking

Creating fixed panels on the left or right side of the viewport that are full height and sticky.

[mpawelski]

But it's clearly the feature that people want and expect to be there. This is the most upvoted issue on CSS WG Github[0] and the StackOverflow question how to do it in CSS has 3 pages of answers (spoiler-alert: there is no nice way to do it only with CSS).

> The browser doesn't know what the auto size is any more than you do until it performs a layout (reflow). Layouts are expensive and must be minimized. And what if content is changed in the middle of the transition? Should it recalculate the new auto size? Maybe we will get it some day, but there are good reasons to be cautious.

Unfortunately these are good questions to answer and probably the reason browsers don't have it yet.

Last time I had to animate `width:auto` and `height:auto` I came up with quite a clever idea. I wrote `width: var(--width-from-js, auto)` and `height: var(--height-from-js, auto)` (CSS Variables (called CSS Custom Property[2]) with a fallback to `auto` when the variable is not defined) and later in JS I calculated the real width and height (using `getComputedStyle` or `getBoundingClientRect`) and just set `--width-from-js` and `--height-from-js` as inline style on the element. I also added event handler for the event that could change the size of this element (like browser window resize) and rerun this code to set updated CSS Property valaues.

This way the changes required in JS were minimal, most of the things was in CSS. As a plus when one day browser would support animation to `auto` I would only have to delete the JS code.

I need to write about this technique on this 3-pages stackoverflow question one day ;)

Interesting observation was that when there was an animation in progress and the code for calculating the width of the element had run (because I resized the browser window) then the animation would just stop. I wouldn't mind if this was also the behavior if browsers would someday support animation of `width/height: auto` natively.

[0]https://github.com/w3c/csswg-drafts/issues/626 [1]https://stackoverflow.com/questions/3508605/how-can-i-transi... [2]https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...