Re: [csswg-drafts] [css-transitions] Transition to height (or width) "auto" (#626)

The question came up a number of times earlier in the discussion:  why not just support animation from keywords to lengths?  I said that I'd do a bit of research on the compatibility of doing this and report back.  **I think at this point I've done sufficient research to determine that supporting animation between width keywords and lengths/percentages isn't web compatible.**

How did I determine this?  In addition to the work I've been doing on `calc-size()`, I implemented a second hidden feature flag in Chromium to support this keyword animation.  Thus anyone with current (though not necessarily future, since I will probably delete the code for this hidden feature at some point) Chrome Canary can test the effects using `--enable-blink-features=CSSCalcSizeFunction,CSSSizingKeywordAnimation` on the command line.  (The first of these flags is also enabled by enabling "Experimental Web Platform Features"; the second one is not.)  (See [the CL that added this flag](https://chromium-review.googlesource.com/c/chromium/src/+/5379394).)

I also wrote [a CL to gather data on sites that hit this codepath](https://chromium-review.googlesource.com/c/chromium/src/+/5404363) and an [additional CL to print out some diagnostics when this happens](https://chromium-review.googlesource.com/c/chromium/src/+/5423519).  I used [cluster telemetry](https://www.chromium.org/blink/platform-predictability/compat-tools/#on-demand-crawl) (see [second doc](https://docs.google.com/document/d/1vGd7dnrxayMYHPO72wWkwTvjMnIRrel4yxzCr1bMiis/edit)) to use the first of these CLs to gather data on which sites in a list of top 1000 sites hit my counter **on loading**.  I then used the second CL, combined with devtools, to try to understand what part of the site was hitting the counter and whether there were visible regressions from enabling transition/animation support between these values.  Note that this technique was not foolproof -- sometimes I might just fail to see the visual difference even if one was present, or even fail to figure out the right elements to look at.  I didn't go all the way through the list of sites that hit my counter, but I went partway through (see full data below).

<details><summary>The full data I have are in this hand-edited CSV file with my notes for the ones that I analyzed. (expand for details)</summary>

```
blink/LengthAnimationOneKeyword/value,blink/LengthAnimationTwoKeywords/value,page_name,notes
8.0,,http://www.163.com (#25),"Attempts to animate values on images from auto to 100%.  I don't see the visual effect but I also didn't figure out which images were involved."
1.0,,http://www.stackoverflow.com (#41),"The ""Every developer has a tab open to Stack Overflow"" animation has a rather visible glitch when it starts where the surrounding text briefly compresses around the word developer.  It animates auto to both the calculated height and width when starting the animation for the first time.  It is a span with flex layout."
1.0,,http://www.mail.ru (#49),"Couldn't repro when loading live site."
3.0,,http://www.aliyun.com (#73),"Toolbar dropdowns on https://www.alibababcloud.com/en at the top of the page (with wide window) have a height animation that isn't present without the flag enabled.  It's not necessarily a bad effect, but it's a visible change."
256.0,,http://www.3dmgame.com (#81),"Similar img element animations to 163.com, can't see visual effect."
4.0,,http://www.deepl.com (#86),"Couldn't reproduce on live page."
45.0,,http://www.alibaba.com (#102),"Seems related to the carousels on the page with class=next-slick-slide, but couldn't see a visual difference."
1.0,,http://www.gitee.com (#153),"An ant-tabs-ink-bar animating between 0px and auto.  Can't see the visual effect."
2.0,,http://www.intuit.com (#194),"Carousel controls animating between auto and 392px. (Self-Employed / Small Business / Consumers) carousel.  The words Small Business have an unexpected and undesirable animation of the white background behind them during page load, though only visible with a very tall window or having the page zoomed out."
1.0,,http://www.ups.com (#244),"DIV with id accordion_2_0_content animating between 0 and auto.  This is the expanded item in the Rates Updates section, which actually expands as the page opens.  It's only visible on opening the page if zoomed way out or on a very tall window.  Opening/closing the item is visibly different, but perhaps better with the feature enabled."
1.0,,http://www.hp.com (#284),"Animating BODY between auto and 100%.  I don't see a visual difference."
5.0,,http://www.target.com (#289),"Animating multiple DIVs without any class/id between auto and lengths, some zero, some nonzero.  Can't spot the difference."
3.0,,http://www.varzesh3.com (#304),"Animating 3 DIV class=owl-stage from auto to very large lengths.  These are for the carousel at the top of the page, the carousel just below it, and a carousel further down.  Doesn't appear to be anything visually broken."
2.0,,http://www.marca.com (#329),"Animating an A with class ue-c-carousel__show-more from 1px to auto, and a DIV with id didomi-host from auto to 0.  Could not find the former in the page; the latter has to do with the consent popup when the page loads, and I couldn't see any visual glitches with that."
20.0,,http://www.riotgames.com (#344),"Constant animation of elements from auto to a small length that decreases over time and then resets to 8px.  Couldn't figure out which elements."
1.0,,http://www.cricbuzz.com (#393),"DIV with ID main-menu_search from auto to 30px.  This is the magnifying glass icon near the right side of the top toolbar.  With animations enabled there's an undesired animation of this widget revealing itself from left to right rather than being present when the page loads."
1.0,,http://www.geeksforgeeks.org (#418),
9.0,,http://www.dell.com (#423),
1.0,,http://www.globo.com (#427),
1.0,,http://www.ithome.com (#431),
1.0,,http://lenovo.com.cn (#432),
3.0,,http://www.asurascans.com (#442),
,2.0,http://www.asana.com (#457),
5.0,,http://www.ctfile.com (#492),
8.0,,http://www.disneyplus.com (#582),
1.0,,http://www.service-now.com (#608),
2.0,,http://www.feimaoyun.com (#618),
2.0,,http://www.bitly.com (#638),
10.0,,http://www.outbrain.com (#646),
3.0,,http://www.dhl.com (#649),
7.0,,http://www.acs.org (#666),
1.0,,http://www.wps.cn (#667),
1.0,,http://epfindia.gov.in (#670),
7.0,,http://moegirl.org.cn (#696),
7.0,,http://pchome.com.tw (#704),
2.0,,http://www.squarespace.com (#720),
1.0,,http://www.bytedance.com (#723),
10.0,,http://www.58pic.com (#747),
1.0,,http://www.onelink.me (#797),
1.0,,http://www.todesk.com (#800),
9.0,,http://www.irs.gov (#821),
2.0,,http://www.bit.ly (#824),
1.0,,http://www.semrush.com (#825),
1.0,,http://www.buzzfeed.com (#826),
2.0,,http://www.aol.com (#839),
7.0,,http://sat.gob.mx (#841),
2.0,,http://www.td.com (#844),
33.0,,http://www.criteo.com (#899),
5.0,,http://www.t-online.de (#906),
4.0,,http://sjtu.edu.cn (#944),
```

</details>

Note that this is a very conservative sample because it only looks at loading of site homepages.  Many transitions and animations happen in response to user interactions, and happen on pages other than the homepage.

I found the following site homepages that showed visible differences when enabling transitions and animations between sizing keywords and lengths/percentages:
* On http://www.stackoverflow.com "Every developer has a tab open to Stack Overflow" animation has a rather visible glitch when it starts where the surrounding text briefly compresses around the word "developer" (which later animates into other words).  It animates auto to both the calculated height and width when starting the animation for the first time.
* On https://www.alibababcloud.com/en (which is what http://www.aliyun.com redirects to, at least in the US) the toolbar dropdowns have a height animation that isn't present without the flag enabled.  This isn't clearly good or bad in my opinion, but it is noticeably a different opening effect.
* On http://www.intuit.com in the labels for the (Self-Employed / Small Business / Consumers) carousel, the words "Small Business" have an unexpected and undesirable animation of the white background behind them expanding horizontally from the center during page load, though only visible with a very tall window or having the page zoomed out pretty far on load (because it's not above the fold with a reasonable size window).
* On http://www.ups.com the accordion in the Rates Updates section (which expands as the page opens, well below the fold, thus causing the issue to happen during page load) has a different height animation.  In this case I think the height animation is actually quite a bit better with the feature enabled.  So this is a case where enabling the feature might make an existing page work better.
* On http://www.cricbuzz.com the search widget (text input and magnifying glass) on the right side of the top toolbar has a clearly undesirable animation as the page loads, revealing the widget from left to right rather than having the widget just be present.

The first and fifth issues above (and perhaps also the third, but it's less visible on the home page because it happens only below the fold) might be close to bad enough to mean we'd have to revert the feature if we tried to ship it.  However, more significantly, I think this list of issues suggests there's a long tail of many more issues across many other sites that I didn't examine, which I think makes it clear that we couldn't just ship support for transitions/animations between sizing keywords and lengths/percentages, and that it has to have some sort of opt-in (which, in the current proposal, is use of the `calc-size()` syntax).

-- 
GitHub Notification of comment by dbaron
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/626#issuecomment-2071016522 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 22 April 2024 21:54:32 UTC