Cross-browser builder support

[TrySound]

A list of all bugs in each browser we currently don't support from builder

Safari

• space scrub doesn't work unless you expand inputs
• scrubbing and canvas resizing selects everything in its path as you drag
• When editing paragraph and clicking out, the edit cursor still shows when hovering over the P
• Copy by clicking on the navigator doesn’t work, must click on canvas
• Esc when editing closes full screen in browser
• Bg attachment buttons overflow wrapper (same with anything that uses that component)
• Drag handle not showing on html embed window
• When style source is focused, then you switch instances, style source stays focused though backspace impacts the selected instance, not tokens
• space and inputs scrub does not work
• canvas resize does not work
• css preview is not scrollable
• tooltip list of properties is not scrollable

Firefox

• zoom detection in breakpoints selector

Chromium 118

• background-clip value inside css variable https://github.com/webstudio-is/webstudio/issues/3331

[johnsicili]

Tested on Safari 18

No longer an issue:

• css preview is not scrollable

Still issues:

• canvas resize does not work
• space and inputs scrub does not work

Unsure what this one means:

• tooltip list of properties is not scrollable

[TrySound]

List of properties in tooltip is no longer scroll area, so not an issue

[johnsicili]

Scrub now works in Safari except on spacing inputs. But if you open the spacing input it allows scrub.

Canvas resizing also works.

Though in both cases, as you are scrubbing/resizing, the cursor is highlighting what it's dragging over. That seems to be the main blocker but who knows... I'd need to spend some time building to see what other stuff pops up. Seems close though 🤷

https://github.com/user-attachments/assets/e7e3ef9f-ba70-48e4-b08c-5eba9fb2e1c6