S-choice-list: content below the list jumps on every selection change in Safari

Polaris
1

In Safari on macOS, changing the selection in an s-choice-list briefly pushes everything below the list down by about 4px for roughly 100ms, then it snaps back. It looks like the list renders extra space at its bottom edge on the first paint after the change and removes it on a later paint. Chrome does not do this.

Easy way to see it: open the “Configure table display options” popover example from the docs in Safari and click through the radio options. The button below the list jumps on every change: Popover

To be clear, this is not popover-related. Any s-choice-list with content below it behaves this way; we first hit it on a plain settings card in our embedded app.

While debugging we ruled out our own code: it reproduces with a plain div layout instead of s-stack, with no other elements updating, and even when React never touches the DOM after mount, with the selection handled entirely by the component internally. So it appears to be internal to s-choice-list rendering in Safari.

Is this a known issue?

2

Found a workaround, posting it here in case anyone else hits this.

Polaris currently applies :host { display: contents } to the <s-choice-list> host, so the element doesn’t generate its own layout box. Its shadow content is rendered inside a fieldset.

In my case, making the host generate a box eliminated the transient jump on every selection change in Safari:

s-choice-list {
  display: block;
}

No JavaScript was needed. A proper fix in Polaris would still be appreciated.

3

Hi @Anton , thanks for flagging this and for the easy testing instructions and workaround. It’s not a known issue, so we’re looking into it now.