Safari rendering bug causes upward offset of tool shelf color picker

[Keavon]

There is a Safari bug affecting our color picker popover for the tool shelf's working colors input. It causes Safari to render the popover by about a 130px upward offset. However, the click targets and devtools hover highlight visualizations for the elements in this popover do show up in the correct location, so this only affects how Safari paints the content.

capture_11_.mp4

• It only occurs if there exists a scrollbar in the Properties panel
  • But strangely, it doesn't happen if there exists a scrollbar in the Layers panel— something must somehow be different between those two panels
• It only occurs if the tool shelf has at least two columns
  • However, it being two or three columns doesn't affect how tall the ~130px upward offset is
  • Deleting the .tools container will visibly shrink the shelf back to a width of 1 column, but doesn't stop the issue from occurring until the web page gets resized
• Disabling container-type: size; on the .shelf-and-table element prevents the issue from occurring

We need to investigate this further, ideally create a minimal reproduction test case, and report this. Then hope it's fixed. Or, find a particular way that we can change things to mitigate this on our end.

This is tested on Safari 16.5. container-type was added in Safari 16 (released 2022-09-12).

[Keavon]

Maybe related, as this is the only webkit bug report I can find about container-type: https://bugs.webkit.org/show_bug.cgi?id=256047