Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Metaboxes overlap content: Try compat hack for when the browser is in quirks mode #12455

Closed
wants to merge 1 commit into from
Closed

Metaboxes overlap content: Try compat hack for when the browser is in quirks mode #12455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,3 +567,27 @@ function gutenberg_add_responsive_body_class( $classes ) {
}

add_filter( 'body_class', 'gutenberg_add_responsive_body_class' );


/**
* Prints JavaScript to detect whether the browser is in standards mode or not.
*
* @since 4.5
*/
function gutenberg_detect_quirks_mode() {
?>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function() {
try {
var documentMode = document.compatMode==='CSS1Compat'?'Standards':'Quirks';
if (documentMode != 'Standards' ) {
console.log( 'You are in ' + documentMode + ' mode.' );
document.body.className += ' ' + 'is-quirks-mode';
}
} catch( e ) { }
} );
</script>
<?php
}
add_action( 'admin_print_scripts-post.php', 'gutenberg_detect_quirks_mode' );
add_action( 'admin_print_scripts-post-new.php', 'gutenberg_detect_quirks_mode' );
7 changes: 7 additions & 0 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,13 @@
@supports (position: sticky) {
flex-basis: 100%;
}

// This is an ugly hack that applies a table display to the main editing canvas when the browser is
// detected to be in quirks mode. Without this hack in quirks mode, the flexbox rules we use to size
// the various elements do not work, causing overlap.
.is-quirks-mode & {
display: table;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do the whole detecting quirks mode song and dance, if this simple rule "fixes" the issue?

Partially because we should not optimize our CSS to be able to run in quirks mode. While we're currently primarily seeing the effects on the main editing canvas, quirks mode is likely the cause of a plethora of other tiny visual regressions, and instead of having users report those as Gutenberg issues that are really hard to reproduce and debug, it is probably a better idea to fix the issue at the root: ensure that Gutenberg loads in standards mode.

One other issue that has been reported, is that editor styles that apply a background color, that color does not extend past the initial height of the viewport.

Secondly, because display: table; is a heavy handed rule that is likely to break in a bunch of other ways. The reason it "works" is because an element that behaves as a table will always expand to contain the contents inside. But this behavior itself is also what makes it likely to cause other issues.

}
}

.edit-post-layout__metaboxes {
Expand Down