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

wants to merge 1 commit into from

Commits on Nov 29, 2018

  1. Try: Compat hack for when the browser is in quirks mode 

    Browsers can run in _standards_ modes, or in _quirks_ modes. Usually when a proper doctype declaration is present _right at the top of the page_, the browser will render everything correctly in standards mode.

However lots of things can trigger what's referred to as "quirks" mode. The usual method is when the doctype declaration is missing, or isn't the very first thing in the document. This makes the browser render in a compatibility mode. When this happens, Gutenberg still works, however there are some intricacies of the flexbox we are using for the layout, that break.

It seems that in the majority of cases, what triggers Quirks mode for Gutenberg, is a PHP warning, or PHP error. These are output as little notices at the top of the page, before the doctype. Because of that, the doctype might as well not be present, and quirksmode is initiated.

Obviously the real fix here is for the developer address any PHP errors or notices that might have been thrown by a theme, a plugin, or a metabox. But because the notice might be invisible to the user (output at the top of the page but hidden by the editor bar or something else), a user might blame Gutenberg for not working as intended. Especially because Gutenberg works 99% when in quirksmode.

This PR adds a horrendous hack (seriously, we should probably find a different approach, but see this as a proof of concept) that detects whether Gutenberg is being loaded in quirks mode, and then applies an `is-quirks-mode` CSS class to the `body` element. This CSS class is then used to apply a CSS hack that prevents metaboxes from overlapping content in the main editing canvas.
    @jasmussen
    jasmussen committed Nov 29, 2018
    Configuration menu
    Copy the full SHA
    45c750d View commit details
    Browse the repository at this point in the history