Embeds flicker in editor in Safari as of 7.6

[laurelfulford]

Describe the bug
As of Gutenberg 7.6, the YouTube embed block will flicker in Safari in the editor. Downgrading to 7.5 seems to fix the issue.

To reproduce
Steps to reproduce the behavior:

1. Start with a non-localhost site (for whatever reason, I could not recreate that there), and Safari on Mac OSX.
2. Embed a YouTube video block.
3. Add a YouTube video.
4. The video(s) will flicker 'on' and 'off', between visible and hidden, while previewing in the editor.

Expected behavior
That the video previews as usual.

Screenshots
Video of flickering: https://cloudup.com/cGtCQRz8i8s

The editor contains a three column block with a YouTube video in each column, and a single YouTube video below that.

Desktop (please complete the following information):

• OS: OSX 10.14.6
• Browser: Safari
• Version: 13.0.5

Additional context

• Please add the version of Gutenberg you are using in the description.
• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[mevanloon]

I can replicate this in Safari 13.0.5 and Gutenberg 7.7.1, with a Vimeo link. The embed flickers on and off very fast.
It looks to me like the iframe is constantly being reloaded, because my network tab is showing assets being reloaded a lot.

Console keeps spewing the following:

[Info] Successfuly preconnected to https://i.vimeocdn.com/
[Info] Successfuly preconnected to https://f.vimeocdn.com/
[Info] Successfuly preconnected to https://fresnel.vimeocdn.com/

[mevanloon]

Safari 13.1 on MacOS 10.15.4 has the same issue, also on localhost.

[ersatzpenguin]

I can replicate this issue in Safari 13.0.5, using Gutenberg 7.8.0, and with a YouTube link: https://d.pr/v/r2lh1i

Same site using Chrome 80.0.3987.149 for comparison: https://d.pr/v/Z20iNm

[lizswafford]

#18258635-hc
Video of same error, on Safari:
https://www.youtube.com/watch?v=0fB7vYLKdBc&feature=youtu.be

[thabotswana]

Another report:
#2822719-zen
I can replicate in Safari 13.0.5
Youtube link: https://youtu.be/icosru9NKaY

[mriyazuddin]

Another report: #2821554-zen

[kriskarkoski]

I can see a single flicker when initially loading the Editor and adding a new YouTube embed in Chrome 80.0.3987.149 as well.

[lancewillett]

Another report by @p3ob7o internal P2: p58i-8Oj-p2

Video block odd behavior and resource hog — All video blocks blink in the editor. After a few minutes, the fans start accelerating and the notification about the page using too many resources appears. Mac OS 10.15.4 – Safari 13.1 (15609.1.20.111.8)

[ItsJonQ]

Hi there!

I just tested this locally, and I can confirm that it's flickering in my Safari as well.
I investigated... and it looks like there's something in this update that made Gutenberg x Safari unhappy with iFrames:

5a5564b#diff-1dc93e334dab1ec57a6276b899a639f7

I noticed that the try is being called in a loop, which is causing it to flicker, and for our computer fans to go crazy.

I don't have a solution (yet). But I thought I'd point this out!

Reverting this change fixes it for me!

Update: It looks like the reason why it's breaking in Safari is from this comparison:

const forceRerender = prevProps.html !== this.props.html;

In Chrome, the (html) string matches. Therefore... no re-render.

However, in Safari, the (html) string doesn't match, because the incoming HTML has backslashes before the quotes.

Safari:

prevProps.html

<iframe title="Campfire &amp; River Night...

this.props.html

<iframe title=\"Campfire &amp; River Night...

Update: Nevermind! See next comment regarding onLoad

[mcsf]

Cross-referencing: bug introduced in #20176

[ItsJonQ]

Update! The this.trySandbox method with the forceRerender check is also misbehaving when bound to the onLoad callback of the iFrame:

			<FocusableIframe
				iframeRef={ this.iframe }
				title={ title }
				className="components-sandbox"
				sandbox="allow-scripts allow-same-origin allow-presentation"
				onLoad={ this.trySandbox }
				onFocus={ onFocus }
				width={ Math.ceil( this.state.width ) }
				height={ Math.ceil( this.state.height ) }
			/>

I have a fix! Will create a PR very very soon!
Thank you all for your patience

[ItsJonQ]

Just create a PR for the fix!
#21225

🤞