Meine "Base-Select" -Expasser-Animation funktioniert erst, wenn "width" hinzugefügt wird ⇐ CSS

[Anonymous]

Ich experimentiere mit dem neuen Erscheinungsbild: Base-Select (Sie müssen diese Frage in Chrome anzeigen). Hier ist die teilweise kaputte Demo: < /p>

Code: Select all

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>
Die seltsame Sache ist, dass Chrome die erweiterte Animation eindeutig verfolgt (die enge Animation beginnt damit, wie geöffnet sie am Ende des Schließens sein sollte), und die enge Animation funktioniert einfach gut. Aber die erweiterte Animation funktioniert nicht. Es blinkt einfach sofort auf.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>
Was ist hier los? Was macht Breite 

? Und was kann ich tun, wenn ich nur Höhe ?