Bug when editing entries or pages with macOS Sequoia - Safari 18

[artprojectgroup]

For some reason the float property is not being applied correctly in the layer with id postbox-container-2. After several tests we have been able to verify that if the property is deactivated and re-activated it does apply it well, so for the moment we have created this temporary code that solves the problem:

add_action( 'admin_footer', function () {
?>
<script>
jQuery(document).ready(function($){
    $("#postbox-container-2").css('float','none');
    setTimeout(function() { 
        $("#postbox-container-2").css('float','left');
    }, 100);
});
</script>
<?php
} );

We hope that you find the reason why the float property is not applied since we have not found it so far.

By the way, the issue affects the Classic Editor only.

Thank you in advance.

Best regards.

[github-actions[bot]]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[DigitalPritam1]

It seems you're encountering a CSS rendering issue in macOS Sequoia with Safari 18 when using the Classic Editor in WordPress, specifically with the float property on the element with the ID postbox-container-2.

You’ve identified a workaround using a jQuery script to temporarily reset the float property, which works for now. However, here are a few potential reasons and solutions for why this issue might be occurring:

Possible Reasons: Rendering Differences in Safari: Safari may handle certain layout calculations differently, especially with elements using float. Some versions of Safari have had known quirks with floats and layout updates.

CSS Specificity: There might be competing styles in the page that override or reset the float property.

JavaScript/CSS Race Conditions: The timing of when the CSS is applied and when JavaScript manipulates the DOM may cause inconsistencies in how properties like float are applied.

Potential Fixes: Force Reflow/Redraw: Instead of relying on JavaScript to toggle the float property, try forcing a reflow/redraw to ensure that the element layout updates correctly.

jQuery(document).ready(function($){
    var container = $("#postbox-container-2");
    container.css('float','none');
    container[0].offsetHeight; // Force a reflow
    container.css('float','left');
});

Use Flexbox: If possible, replace the float layout with a more modern layout technique like Flexbox. This approach will give you better control over the layout and is less likely to encounter issues like this.

Example:

#postbox-container-2 {
    display: flex;
    justify-content: flex-start; /* or flex-end depending on your need */
}

Ensure CSS Specificity: If the problem stems from CSS specificity issues, you can add a more specific rule or use !important to ensure that the float property is applied as expected:

#postbox-container-2 {
    float: left !important;
}

Safari-specific CSS Fixes: If the issue is only in Safari, you can apply a Safari-specific CSS rule using a media query for WebKit-based browsers:

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance:none) {
        #postbox-container-2 {
            float: left;
        }
    }
}

Try these fixes and see if any of them resolve the issue more permanently.

[github-actions[bot]]

Hey @DigitalPritam1, thanks for your interest in this issue! 🍪🍪🍪
If you have any questions, do not hesitate to ask them in our #docs Slack channel.
Enjoy and happy contributing ❤️

[DigitalPritam1]

/assign

[github-actions[bot]]

Hey @DigitalPritam1, thanks for your interest in this issue! 🍪🍪🍪
If you have any questions, do not hesitate to ask them in our #docs Slack channel.
Enjoy and happy contributing ❤️

[artprojectgroup]

Thank you for your quick response.

I inform you.

The JavaScript code you propose fixes the problem, just like the temporary fix I proposed:

The CSS codes you propose do not solve the problem, in fact the second one was the first thing I tried without success.

As far as I have been able to verify it happens with any theme, although depending on the theme used, the error is seen in one way or another:

When it should look like this:

I hope you find it helpful.

Best regards.

[shaunrobinson]

I am also experiencing this bug. The workaround does work but it is quite slow to load on large pages. Is there an official fix coming?

[estelaris]

This issue cannot be solved by the documentation team as it is a core/editor problem.

Can you please report it there? https://github.com/WordPress/gutenberg/issues