Top Toolbar editor rendered invisible in Safari when Custom Fields enabled and editor's vertical scrollbar appears

[cuemarie]

Description

In Safari 16.5, when an Image block is added to a page/post enough content is added to a post that the vertical scrollbar appears, AND the "Custom Fields" panel is enabled, the Top Toolbar is rendered invisible, but is still clickable.

Step-by-step reproduction instructions

updated instructions 2023-07-05; see comment for new screenshots

1. Open Safari 16.5
2. Open a post and enable the Preferences > Top Toolbar
3. Open Preferences > Panels and enable "Custom Fields" (Click Show & Reload Page)
4. Add a small amount of content and see the top toolbar work fine
5. Next add enough content to make the vertical scrollbar appear

Observe how the top toolbar is now invisible

Screenshots, screen recording, code snippet

Screen.Capture.on.2023-06-20.at.18-20-41.mp4

Compared with Firefox:

Environment info

• Gutenberg Version 16.0.0
• Safari Version 16.5 (18615.2.9.11.4)
• compared with Firefox 114.0.1 (64-bit)

Originally reported Automattic/wp-calypso#78453

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[foosantos]

Hi @cuemarie, thank you for the report!

I tried to reproduce it, but it seems to work from my end. I tried your specific Gutenberg versions 16.0.0 and 16.1.1 and the same Safari version.

Can you still reproduce the same issue? If so, could you confirm if you indeed see the same with only Twenty Twenty-Three and no other plugins?

[cuemarie]

Hey @foosantos ! I'm still able to reproduce on my test site using only:

• Gutenberg 16.1.1
• WP 6.2.2
• Twenty Twenty-Three (v1.1)
• Safari Version 16.5.1

but I'm not seeing the same thing happen on your test site with the same configuration and browser. 🤔

---

I also see that the issue (on my end) is that when the vertical scroll bar appears in the editor, that's what renders the top toolbar invisible for me. I mistook the image block as the issue in my original report, but that's not the issue - you'll see in the recording below that when the scroll bar appears, that's when I run into the problem:

Screen.Capture.on.2023-07-05.at.17-07-51.mp4

[cuemarie]

Got it! The issue is reproducible when the "Custom fields" panel is enabled, which appears below the editor. Steps to replicate:

1. Open a Post
2. Open Options > Preferences > Panels
3. Enable Custom fields, and click "Show & Reload Page"
4. Add enough content in the editor to make the vertical scrollbar appear
5. Observe the top toolbar turn invisible

[foosantos]

Hi again, @cuemarie!

Thank you for the fantastic work here!

I can reproduce it as well, and I updated the tags accordingly.

[jsit]

This is happening for me even on WordPress.com, using Safari for iPad with iPadOS 16.6. I have a barebones WordPress.com blog for testing, which has no plugins activated and is using the Twenty Ten theme.

Custom Fields are not shown in the compose screen.

The issue occurs when I embed an image in the post.

Can somebody please try this on iPadOS Safari and see if they’re seeing it as well? Thanks.

[jsit]

It looks like this may be fixed by #53688?

[jasmussen]

thanks for connecting the dots, @jsit. @cuemarie, the fix that's being suggested for this should land in 16.5. When that releases in the next couple of days (I think Wednesday or Thursday), can you check and verify if it fixes this issue?

[cuemarie]

Looking good to me! Retested on my site with GB 16.5 active, and the problem appears resolved 🎉

Screen.Capture.on.2023-08-24.at.17-19-19.mov

Closing!