Safari browser Issue: Component canvas is not behaving as expected [#3476903]

Overview

Open the experience builder in the Safari browser, and try to add components in the empty canvas(slot). After adding one component if we try to add another component it is not reflected in the canvas. If we select the component we can not open the prop form for the element.

Safari browser Version 18.0

safari browser issue image

Comment	File	Size	Author
#3	Drupal_Experience_Builder.png	130.25 KB	jessebaker
	Screenshot.png	65.59 KB	shyam_bhatt

Comments

Comment #1

26 September 2024 at 05:36

shyam_bhatt created an issue. See original summary.

Comment #2

shyam_bhatt

he/him

commented 26 September 2024 at 05:43

Issue summary:

View changes

Comment #3

jessebaker commented 30 September 2024 at 14:03

Version:

0.1.0-alpha1

» 0.x-dev

Status	File	Size
new	Drupal_Experience_Builder.png	130.25 KB

I threw a couple of console logs in to see if this was a quick fix but sadly, so far as I can see on a cursory glance, it's not immediately obvious why this isn't working. I've described my findings in the attached image in case that allows someone else to pick this up.

Comment #4

wim leers

Ghent 🇧🇪🇪🇺

commented 30 September 2024 at 15:46

I wonder if this is related to Safari's/WebKit's aim to reduce tracking (see https://webkit.org/tracking-prevention/ + https://webkit.org/blog/category/privacy/) and is somehow being triggered for XB too, despite the domains clearly being identical 🤔 Maybe because we're using srcdoc, that's considered a separate domain?

i.e. perhaps setting <iframe allow=…> would fix this? 🤔 See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow.

Specifically, allow-same-origin: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow-s...

Comment #5

soaratul commented 23 October 2024 at 12:30

I tried allow-same-origin and forceFallback, as mentioned here in this sortablejs issue thread here but none worked 😞

Comment #6

jessebaker commented 23 October 2024 at 15:30

Sadly I've just confirmed that this issue still exists after the work to move the iFrame interactions into an overlay (#3475759: Implement a different approach to the iFrame preview interactions) as it is related to the <IFrameSwapper> and the sortableJS implementation inside the iFrame neither of which have been substantially changed.