Моя анимация `base-select`` `` `ширина" не будет добавлена ⇐ CSS

[Anonymous]

Я экспериментирую с новым внешним видом: Base-Select (вам нужно просмотреть этот вопрос в Chrome). Вот частично разбитая демонстрация: < /p>

Код: Выделить всё

select,
::picker(select) {
appearance: base-select;
}
::picker(select) {
box-sizing: border-box;
height: 0;
min-height: 0;
interpolate-size: allow-keywords;
overflow: hidden;
transition:
height 2s linear,
display 2s allow-discrete,
overlay 2s allow-discrete;
}
select:open::picker(select) {
height: auto;
@starting-style {
height: 0;
}
}< /code>

Option A
Option B
Option C
< /code>
< /div>
< /div>
< /p>
Странное то, что Chrome четко отслеживает анимацию расширения (близкая анимация начинается с того, насколько она должна быть в точке близкого), а близкая анимация работает нормально. Но расширяющая анимация не работает. Он просто мгновенно вскрывает. < /P>
Страшнее, что добавление ширины < /code> заставляет его работать: < /p>


 "select,
::picker(select) {
appearance: base-select;
}
::picker(select) {
box-sizing: border-box;
width: 0;
height: 0;
min-height: 0;
interpolate-size: allow-keywords;
overflow: hidden;
transition:
width 2s linear,
height 2s linear,
display 2s allow-discrete,
overlay 2s allow-discrete;
}
select:open::picker(select) {
width: auto;
height: auto;
@starting-style {
width: 0;
height: 0;
}
}< /code>

Option A
Option B
Option C
< /code>
< /div>
< /div>
< /p>
Что здесь происходит? Что делает ширина 

? И что я могу сделать, если хочу только оживить высоту ?


Подробнее здесь: https://stackoverflow.com/questions/797 ... h-is-added