Cannot edit button label in Safari

[okonet]

To reproduce

1. open https://alpha.webstudio.is/designer/794f3f9a-5a3f-4d65-9006-9e7946a1ff68
2. Double-click it and try to edit the label

I cannot edit the label after the first keystroke.

CleanShot.2022-06-21.at.11.01.41.mp4

Also, sometimes the cursor is being shown in a wrong position.

[kof]

I think we should focus on Chrome for now and push everything else for later stages. We need to inform the user to prevent them see broken experience, wdyt?

If agree we need an issue to add browser detection and a banner, preventing user from using the designer. Published site or even preview will still work perfectly fine, so its really just for the designer

[okonet]

Frankly I think it’s a slippery road to go since I can’t imagine eliminating that kind of technical debt later on. Or do you have a good plan for it?

[kof]

it’s a slippery road to go

I don't love it, but the fact is we would have to test each change for each feature in each browser, right now, which effectively would cost us valuable time, especially when releasing every feature.

For example webflow still only supports chrome and safari, here is the overlay they show in Firefox:

To make it easier to support more browsers later, I think we need to start writing down the list of browser APIs that we already rely on and that won't work in Firefox for example. Then we need to start looking into fallback solutions to those apis if they are possible at all.
Maybe need to start marking code that doesn't work in certain browsers with a tag e.g. @experimental

I just think we want to be on the cutting edge of the APIs and only support browsers which allow us to do so in regards to Designer UI, the site itself should work everywhere ofc.

[kof]

A few more things to keep in mind when deciding to support many browsers for Designer interface:

1. Designer is a very complex program, not a regular site, it could be generally very hard to support certain interactions in multiple runtimes
2. Supporting multiple runtimes puts a constraint on you when deciding how to build new things, can't just blindly build on the cutting edge features and release now. Browsers will catch up later eventually, but you will have to wait potentially years for certain API until you can use it, its often not polyfillable or not in a good way
3. Designer experience itself is not as frequently used as a published site. Asking user to open Chrome or Edge is today a very small ask, I am not sure that's a problem at all, especially considered our users are not complete noobs most of the time.

[okonet]

@kof it makes sense from the business standpoint at this moment of time but my concern is accessibility and adoption. The more barrier we put upfront the worse it is for the adoption. Just as an example: I can run Figma on my iPhone and it runs almost exactly as it is on desktop (with viewport constraints etc. of course).

I think it's fine to take shortcuts while chasing for the beta and maximizing the value for the majority of users (yet we don't know what browsers they will be using just yet but Chrome dominates the web either way) but IMO we should mark features / bugs somehow in a consistent way in order to get rid go them later. Your proposal to use JSDoc syntax makes sense so let's settle on this asap and start documenting?

[kof]

Yeah, we need to see if we can at least make it work in safari. Touch devices are a separate challenge though, because all the drag&drop interactions need to work. I really want webstudio to run on a tablet some day, but I am afraid right now it would cost us a lot of time.

[kof]

how do we call it for inline documentation? JSDOC doesn't have a special tag for it, maybe

@unsupported safari, firefox

[okonet]

@unsupported safari, firefox

SGTM!

[kof]

not reproducible any more