🐛 SAFARI: Select and Autocomplete's overlay don't have the correct size on Safari.

[alexasselin008]

Describe the bug

When using Safari, the select and autocomplete component display the following error in the console:
TypeError: undefined is not an object (evaluating '$(e.borderBoxSize)[0].inlineSize')

This code is used in the useTriggerWidth's code.

This is due to the fact that the resize-observer-polyfill doesn't have a polyfill for the borderBoxSize and contentBoxSize's properties, as per issue que-etc/resize-observer-polyfill#77.

Steps to reproduce

On Safari, open a page with a select or autocomplete control. Notice the error in the console.
The width of the overlay is also different:

expected :

Expected results

The overlay's width should be the same as the trigger.

[fraincs]

I agree that this is a bug, at least it's non breaking since the options are visible and actionnable.

[fraincs]

The polyfill we are currently using seem pretty much dead. No action at all for a while, should we eventually move to https://github.com/juggle/resize-observer who supports borderBoxSize and contentBoxSize and seems somehow more maintained? From what I read the migration is not a lot of work.

[fraincs]

@alexasselin008 any opinions?

[alexasselin008]

Another suggestion would be investigating if we can move away from borderBoxSize.

Main reasons for only observing content box size are:

• efficiency: internally, all(?) browser engines store content box size as a variable. The other boxes are computed relative to it. To observe resizes efficiently, all engines have to do is trap writes to this variable. Computing other box sizes introduces many other dependencies, that are complex to compute efficiently.
• simplicity: narrow standards are more likely to be implemented, and be interoperable.

WICG/resize-observer#34 (comment)

[fraincs]

This has been fixed on Safari side, testes on Safari Version 15.6.1 (17613.3.9.1.16) and no error in the console, the width is good too.