statamic / cms

The core Laravel CMS Composer package
https://statamic.com
Other
4.02k stars 528 forks source link

Live preview: pop-out mode unstable in Chrome #724

Closed sauerbraten closed 2 years ago

sauerbraten commented 5 years ago

Using the live preview's pop-out feature works great most of the time, but occasionally the frames appear to lose sync for no apparent reason and the integrated preview area opens again, while the pop-out frame remains open as is not updated anymore.

We haven't found a reliable way to replicate this behavior, but you could try resizing the main window (similar to how resizing the pop-out window induced this behavior some time ago).

jasonvarga commented 5 years ago

Can't recreate this. 🤔

Could you please provide some more details?

wiebkevogel commented 5 years ago

I noticed that I could not open the pop out window at the Safari browser (version 13.0.2). JS Error : ReferenceError: Can't find variable: BroadcastChannel

jasonvarga commented 5 years ago

There was an issue regarding the popout not working at all, that has been fixed by 63a2dbd2

As for being "unstable", it might still be. Although I still cant replicate it.

Just noticed that this doesn't work for Safari at all. #818 We will just disable the button in Safari temporarily.

wiebkevogel commented 5 years ago

Unfortunately the error still occurs.

preview_bug

jasonvarga commented 4 years ago

This appears to be resolved. Let us know if you're still running into this issue.

mgschoen commented 3 years ago

Hi @jasonvarga, this issue still exists for us and I might be able to provide some more details. I noticed the LivePreview.vue component expects the Popout.vue component to respond to pings within 500ms. Otherwise it snaps back to integrated preview.

I suspect this is an issue with CPU load. There can be situations when the popout window's renderer process is too busy to respond within 500ms. This may be the case on paint-heavy sites where lots of animated ads are shown, such as our homepage.

I tried to isolate the problem with a little example template. (Granting you repo access the moment I post this comment.) This template renders a bunch of animated triangles to keep the browser busy. Resizing the preview window increases the workload enough to prevent Chrome (mine, at least) from sending the 'popout.pong' in time, so the LivePreview component snaps back to previewing inline.

popout-preview

If you happen to have a faster machine than I do, try increasing the number of triangles :) Note that this only happens in Chrome (and Chromium-based Edge). Firefox seems to be better at optimizing and Safari does not have the Popout feature.

jasonvarga commented 3 years ago

Funny, we went through this exact thing with you guys already. #580

I guess we can just bump up the number even more. Or make it configurable.

mgschoen commented 3 years ago

Oh, my bad. Didn't know about that first round, sorry :/ I guess configurable would be nice. As for the delay with the popping in, we could try sending a popout.close on window.onbeforeunload and make the LivePreview react to that as well. Do you think that could be a feasible solution?

jasonvarga commented 3 years ago

Sounds like a good idea. It's been a while since I built that, so maybe there was a reason I didn't do it like that from the start. Maybe I just didn't think about onbeforeunload!

mgschoen commented 3 years ago

Yeah I guess only the combination of onbeforeunload and a timeout works reliably, so you always have a fallback if something goes wrong with onbeforeunload. Let me know when you find out more, really curious about that one 😁

jackmcdade commented 2 years ago

We've been keeping this issue around like an old t-shirt we don't fit into anymore but don't want to get rid of. I'm not exactly sure how actionable it is without being able to recreate reliably, so I'm thinking we close it and wait for it to resurface again with newer info if it's still an issue.

Hope that's alright for everyone! ❤️