Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 4 months ago

#62082 closed defect (bug) (reported-upstream)

Classic Editor broken in Safari for MacOS Seqouia

Reported by: ucallrt's profile ucallrt Owned by:
Milestone: Priority: normal
Severity: major Version:
Component: Editor Keywords: has-testing-info has-screenshots
Focuses: administration Cc:

Description

https://www.bikeworldnews.com/wp-content/uploads/2024/09/Screenshot-2024-09-19-at-9.14.37 AM.png

As seen in the attached screenshot, the classic editor in Safari/MacOS Sequoia is not rendering correctly in the 2 column format. Basically, all of the page elements that would typically display below the main editor window are shoved into the right sidebar, effectively covering over the elements that one would expect there, like the publish & category elements.

I know that the classic editor has not been maintained for some time, but I'm sure that there are a lot of us that have been using WP for years that still rely on its streamlined efficiency for 'basic' posts.

The Classic Editor is still working in Chrome. Seems to be limited to Safari.

Attachments (5)

Screenshot 2024-09-20 at 10.27.42 AM.png (155.0 KB) - added by peterwilsoncc 5 months ago.
classic editor with latest safari on latest mac os.png (763.2 KB) - added by krupajnanda 5 months ago.
With ACF installed.jpg (230.2 KB) - added by krupajnanda 5 months ago.
62082.diff (518 bytes) - added by sabernhardt 5 months ago.
clears left float in two-column metabox layout (Classic Editor and attachment editing)
Edit-Media-Screen-Options.png (31.1 KB) - added by sabernhardt 5 months ago.
floating 2-column layout is also available in Edit Media page's Screen Options

Download all attachments as: .zip

Change History (27)

#1 @peterwilsoncc
5 months ago

Hi @ucallrt and welcome to trac!

I've tested this in Safari 18.0 on macOS Sonoma 14.7 without any plugins installed and am able to reproduce the error.

I've been unable to find a change that may be causing the issue so am wondering if there is a bug in the new version of Safari.

What version of Safari are you using?

Thanks.

This ticket was mentioned in Slack in #core-test by peterwilsoncc. View the logs.


5 months ago

#3 @ironprogrammer
5 months ago

  • Keywords needs-design removed

Thanks for the report, @ucallrt, and for the ping, @peterwilsoncc!

Testing Safari 17.6 under Sonoma 14.6.1 I'm not able to reproduce this issue. The screenshot below is from this Playground link (the official Classic Editor preview), but appears consistent with my local WP environment as well.

@ucallrt, does the plugin's Playground preview also result in the display discrepancy?

Display under Safari 17.6:

https://cldup.com/QNqi4MYxiv.png

And with Screen Options > Custom Fields enabled:

https://cldup.com/cwwBEbt9sJ.png

Last edited 5 months ago by ironprogrammer (previous) (diff)

#4 @ucallrt
5 months ago

The version of Safari is Version 18.0 (20619.1.26.31.6)

#5 @peterwilsoncc
5 months ago

There's a related support topic in the forums https://wordpress.org/support/topic/safari-18-0-breaking-classic-editor/

I'll see if I have any luck sending the playground link to Apple folks on Mastodon.

#6 @krupajnanda
5 months ago

Hello @ucallrt

I tested with with latest mac OS on latest safari but I am unable to replicate this issue with classic editor. Please check the attached screenshot.

Please feel free to share if I have missed anything while checking.

Test Environment Setup:

  • Local host
  • WP latest (6.6.2)
  • Installed plugins : Classic Editor
  • MAC OS : Sequoia
  • Safar Browser Version : 18 (latest)

#7 @krupajnanda
5 months ago

  • Keywords has-testing-info has-screenshots added

Okay, so with ACF installed my site I found that the elements are getting overlapped with classic editor.

I am able to replicate this bug with mentioned environment.

Please check this screenshot attached.

CC @ironprogrammer @peterwilsoncc

This ticket was mentioned in Slack in #core-test by krupajnanda. View the logs.


5 months ago

#9 @ucallrt
5 months ago

I am not using ACF, and the example posted by @krupajnanda is only the ACF modal overlapping the publish window, not all modals as I am experiencing.

#10 @ucallrt
5 months ago

Patched with a fix from the other window:

marknjones (@marknjones)
2 hours, 56 minutes ago
Just in case it’s helpful, following @conartstudio’s suggestion just drop the following code into your theme’s functions.php file and it should patch the issue for you, clients, everyone:

add_action('admin_head', 'my_custom_css');

function my_custom_css() {
	echo '<style>
		#postbox-container-2 { clear: left; }
		.index-php #postbox-container-2 { clear: none; }
	</style>';
}

Obviously it would be better if the plugin itself were patched to resolve the issue.

Last edited 5 months ago by sabernhardt (previous) (diff)

@sabernhardt
5 months ago

clears left float in two-column metabox layout (Classic Editor and attachment editing)

#11 @sabernhardt
5 months ago

  • Focuses administration added
  • Milestone changed from Awaiting Review to 6.7
  • Version 6.6.2 deleted

Thanks for the code snippet!

I am unable to test in Safari, but I made a patch to clear the left float only when in two-column layout.

  1. Edit a media attachment, with all Screen Options checked and "2 columns" layout selected.
  2. Test with Classic Editor in 2-column layout, with some metaboxes in each column.
  3. Please confirm that the patch does not (adversely) affect other instances of #postbox-container-2, such as on the Dashboard or in the block editor with the Custom Fields metabox enabled.

#12 @peterwilsoncc
5 months ago

  • Milestone 6.7 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

I reached out to Jen Simmons on the Developer Experience team at Apple via Mastodon.

Jen has confirmed that the issue is due to a bug introduced in Safari 18 and a bug report has been filed on the WebKit bug tracker, see WebKit#280063. A minimal reproduction has been created by the WebKit team.

As the issue has been confirmed as a bug in other software, I've closed this issue as reported upstream.

#13 @sabernhardt
5 months ago

#62092 was marked as a duplicate.

#14 @azaozz
5 months ago

Thinking this may need a workaround for WP 6.7 if Safari is not fixed in the next month or so. The old Edit Post screen is in maintenance mode, but a lot of people still use it. The fix seems petty simple but should be added only to Safari and should be RTL aware. Seems something like this may work:

if ( $GLOBALS['is_safari'] ) {
    $clear = is_rtl() ? 'right' : 'left';
    echo "<style>#post-body #postbox-container-2 { clear: {$clear}; }</style>";
}

On the other hand there is a more or less acceptable workaround (set it to one column from Screen Options), so maybe just wait for Safari to be fixed?

Last edited 5 months ago by azaozz (previous) (diff)

#15 @peterwilsoncc
5 months ago

@azaozz I'm tracking the issue on the webkit bug tracker but not sure if they plan to put it in 18.1, ETA, etc.

If you're happy to do a targeted fix, then that works for me too. There's a CSS hack that could work too if you want to account for CDNs stripping/replacing the user agent header. https://jsbin.com/najijad/1/edit?html,css,output

Would this need to go in Core or the plugin?

#16 @azaozz
5 months ago

Thinking better in the plugin? Easier to manage/update as soon as needed :)

There's a CSS hack that could work too

Yea, was looking at these too. Seem a bit hacky but perhaps a better idea to be independent from the user agent string.

@sabernhardt
5 months ago

floating 2-column layout is also available in Edit Media page's Screen Options

#17 follow-up: @sabernhardt
5 months ago

Editing the (official) Classic Editor plugin would be quicker, but does this bug affect the Edit Media screen too? It also uses floating and negative margins.

(The image shows the extra elements checked, such as Slug and Author. These would appear in the #postbox-container-2 area.)

Last edited 5 months ago by sabernhardt (previous) (diff)

#18 @sabernhardt
5 months ago

#62102 was marked as a duplicate.

#19 in reply to: ↑ 17 @azaozz
5 months ago

Replying to sabernhardt:

does this bug affect the Edit Media screen too?

Don't see it on the Edit Media (image) screen most likely because there is only one postbox there.

Thinking to add the fix to the Classic Editor plugin soon. Then if there are more places in core it can be added to WP 6.7 too if Safari is not fixed in the meantime.

#20 @azaozz
5 months ago

Added a temp fix/workaround to the Classic Editor plugin: https://github.com/WordPress/classic-editor/commit/ebd9da7f389d7ab18852d49e26463a8aafa21a12. Props: ucallrt, peterwilsoncc, ironprogrammer, krupajnanda, sabernhardt.

Thinking to release the new version as soon as the workaround is confirmed working as expected. Please test: https://github.com/WordPress/classic-editor :)

#21 @peterwilsoncc
5 months ago

The patch has landed in WebKit a short time ago, so it's looking promising for an upstream fix sooner rather than later. https://bugs.webkit.org/show_bug.cgi?id=280063#c4

However, I agree a plugin release in the short term would be good to assist WordPress users.

#22 @ironprogrammer
4 months ago

Update: The temporary workaround for this Safari issue has been released with Classic Editor v1.6.5.

Thank you to everyone who reported and helped identify the problem! 🙌🏻

Note: See TracTickets for help on using tickets.