Significant amount of blank screen recordings on Safari since 1.186.3

[fluidsonic]

Recently, we noticed quite a few blank screen recordings. The background is visible and the correct color and the user clearly uses the website, but there's nothing else to see in the replays.

I noticed it in Safari (desktop & mobile) 17 & 18 with PostHog JS library 1.186.3, 1.186.4, 1.187.2, 1.188.0, and 1.189.0. However, it does work sometimes with these configurations. There are no errors reported in the console, according to the screen replay.

I noticed that there don't seem to be any problematic recordings before mid-November. I also checked for screen recordings that use PostHog library 1.186.0, 1.186.1, and 1.186.2. None of these were affected (but our number of replays in Safari for 1.186.2 is low).

This is probably a bug introduced somewhere around 1.186.3.

Let me know if there's anything else I can provide to help understand the issue.

Update

We noticed a lot of reports in our error reporting:

Message: The string did not match the expected pattern.
at matches line NaN, column null ([native code]:null)
at ? line 1, column 11167 (…/static/recorder.js?v=1.189.0:1)
at ae line 1, column 14579 (…/static/recorder.js?v=1.189.0:1)
at o line 1, column 31052 (…/static/recorder.js?v=1.189.0:1)
at ? line 1, column 32265 (…/static/recorder.js?v=1.189.0:1)
at ? line 1, column 30703 (…/static/recorder.js?v=1.189.0:1)
at ? line NaN, column null ([native code]:null)

Update 2

The exception above was triggered only by a single user within the past month and is probably not related to this issue. May just be a coincidence.

[kieri097]

We have been experiencing similar issues starting mid/lateNovember ; background shows and user activity is recorded correctly, but the interface itself does not show during playback (@pauldambra is already looking into it).

I just went through our recordings and the issues start appearing after we updated from 1.181.0 to 1.187.2 ; so if for you the last working version was 1.186.1, i guess that would fit with your error version triangulation .

We also made some other changes during the same update, still trying to figure out if we changed anything on our end that might be behind it...

No errors on our side though, where are you seeing those? (Also, from what I can tell, chrome recording are working fine)

[pauldambra]

Hey @kieri097 I'm certain yours is a different issue - I believe you're reporting you have a black background and see mouse moves, that was indeed fixed in 1.187.2.

@fluidsonic that's an amazing and wonderful level of detail, thank you - I was working through understanding this yesterday but the "only in some browsers, and only sometimes" makes it hard to track down. this will be invaluable 🙏

[kieri097]

Not quite though, similarly we see background + part of the interface; no black background. We've been corresponding via email yday, in case you didn't make the link (i hope you enjoyed brushing up on your GCSE maths 😉 ).

But wouldn't want to pollute a different issue if you think that's indeed a different problem 😊

[pauldambra]

in case you didn't make the link

I didn't, sorry, it's been a long week!

[pauldambra]

That error line/message points at rrweb-io/rrweb#1503

And suggests Safari's support for the :modal selector

Which would also suggest we wouldn't see this on Safari 15.6+
https://caniuse.com/?search=%3Amodal

Just puzzling through the best fix

[fluidsonic]

@kieri097

No errors on our side though, where are you seeing those? (Also, from what I can tell, chrome recording are working fine)

We use https://raygun.com to log front-end exceptions. This one was caught by the unhandled exception handler (window onerror). I checked all historical data of the past month and it only seems to have affected one user (27 times). So it's probably not related to this issue.

[pauldambra]

it only seems to have affected one user (27 times). So it's probably not related to this issue.

yep, that's super useful context.

so it looks like you're getting this blank screen issue since 1.186.3

and separately you've discovered a single user issue with modal - could you check that user's browser version (that would be amazing)

[fluidsonic]

and separately you've discovered a single user issue with modal - could you check that user's browser version (that would be amazing)

OS - Mac OS X 10.15.7
Browser - Safari 15.4

[pauldambra]

Awesome, thank you!

Yep, safari supports dialog from 15.4 but the :modal selector that's being used in the recorder only from 15.6

I've just released 1.190.1 that catches this error. It does mean for those recordings we're guessing whether the dialog was opened with show or showDialog but also, hopefully, is very few users generally so 🤞

I'm working on a speculative patch for the main issue too

[pauldambra]

OK, 1.190.2 is out with two changes, they're a little speculative since this is pretty hard to reproduce. Would be great if you're able to test and see if things improve

[fluidsonic]

Thanks, we'll keep an eye on it 🙏

[juanjorge]

Hi,

this is happening to us, I tried with the recent version: 1.190.2 and still got the blank screen recording.

Also, I tested all these version:

• 148.2
• 1.155.0
• 1.161.3
• 1.169.0
• 1.178.0
• 1.181.0
• 1.184.2
• 1.190.2

and for me started working on 1.139.2

please let me know if you need anything more else

thank you !

[pauldambra]

Hey @juanjorge could you share a screenshot or give more details?

This issue hasn't been happening since 1.139.2 - Thanks

[juanjorge]

Sure,

The session recording video stays at the first frame, sometime is a blank space, other time is the initial page, but doesn't reproduce anything, the right sidebar where the events, console and network are, display correctly the logs and movement of the user, but the video remains without any change, sometime the video reduce the height.

In addition , I did couple of tests more:

• loading all extensions and external dependencies
• removing the npm library and use the JavaScript snippet

both cases didn't worked.

[fluidsonic]

@pauldambra

OK, 1.190.2 is out with two changes, they're a little speculative since this is pretty hard to reproduce. Would be great if you're able to test and see if things improve

I found two new blank recordings that use library version 1.190.2 😞

[pauldambra]

Hey,

I've released v1.193.1 which I believe resolves this. If you're using the HTML snippet you'll update automatically, otherwise you need to update from NPM

Let us know how it goes.

Thanks 🤞

[kieri097]

Awesome, thanks a lot! I've updated to 1.193.1 now; will report back once we have a few new recordings :)

[kieri097]

Working correctly on Safari mobile and desktop again! Thanks a lot @pauldambra 🥇

[pauldambra]

Amazing news! Thanks for letting us know

[fluidsonic]

I checked dozens of recordings with 1.193.1. None of them are blank. Looks like it's fixed!
Thank you very much for the quick solution ❤️

[pauldambra]

Awesome! 🚀