Bug 308811 – Customizable select issues

• Component: Forms
• Status: NEW

[Jake Archibald]

https://random-stuff.jakearchibald.com/fancy-select/ - here's a demo where I kinda threw everything at it, and it's unusably broken in TP.

There's a layout shift in the rendering of the button, which seems to be a bug (there's no JS on the page, and a single stylesheet).

It seems like optgroup isn't properly supported? Demos on https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1 that use optgroup are also broken.

[Jake Archibald]

The attr() on the legend is also failing.

https://random-stuff.jakearchibald.com/fancy-select/without-optgroup/ - here's a version that doesn't use attr() or legend.

When refreshing the page, the picker sometimes flashes open.

The position of the picker is wrong.

The animation of the highlighted area (using anchor positioning) is flaky.

The enter and exit animations of the picker are broken.

[Jake Archibald]

Sorry, I should say, the attr isn't on the legend, it's on the opt-group, but it's picked up via a custom property on the legend's ::before

[Tim Nguyen (:ntim)]

Thanks for detailed report and the extensive test cases!

- optgroup was fixed here: bug 308109 (that didn't make STP 238 unfortunately)

- Regarding

`legend::before { content: var(--legend-text) }` 

I think this is working as expected in Safari, the fact that it works in Chrome seems wrong ?
var() does plain text substitution without evaluation, so this ends up becoming `legend::before { content: attr(label) }`, but `legend` has no label attribute, so nothing shows.

Not sure if I missed something, but please let me know if I did.

- When refreshing the page, the picker sometimes flashes open.

That's indeed a bug!

- The position of the picker is wrong.

Safari has the correct behavior here in terms of anchor positioning. Sizing of the popup does differ though (hopefully bug 308559 will make it better).

- The enter and exit animations of the picker are broken.

entry animation works fine on a tip of tree build (assuming sizing/positioning are correct)

exit animations seem to be in flux spec-wise: https://github.com/w3c/csswg-drafts/issues/13200 , we could certainly hack around to make it better, but it wouldn't be spec compliant. 

 - The animation of the highlighted area (using anchor positioning) is flaky.

I'm guessing you're referring to the exit animation shifting position? That relies on the issue mentioned in the previous point.

[Tim Nguyen (:ntim)]

> - The animation of the highlighted area (using anchor positioning) is flaky.

Oh I see the subtle hover effect now, seems like a bug involving anchor positioning and transitions I would guess

[Radar WebKit Bug Importer]

<rdar://problem/171887062>

[Jake Archibald]

Chrome is doing the right thing with attr() here, but it depends on the newer definition of attr(). I guess that's a pretty separate bit of work, but it plays really well here with enhancing <optgroup>.