1546707 - Ghost blog admin page renders incorrectly when switching to night mode

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, defect)

Description

[Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail]

When opening the admin panel to administer a ghost blog I see an incorrectly rendered page. This differs depending on the page opened, though typically I see icons that should be fairly small taking up the entire screen instead.

I've been testing this using a GhostPro hosted blog, but that is not publicly exposed, so the STR are based on using a locally hosted setup.

STR:

• Install a local ghost env per instructions at https://docs.ghost.org/install/local/
• Open the admin panel (by default at http://localhost:2368/ghost) and login
• Navigate to the labs menu (bottom left).
• Enabled the "Night shift" option to set the dark theme
• Observe styling bustages.

Expected result:
The page retains most of its styling, but with the dark theme.

This appears to be a regression from bug 1281135. As I'm unfamiliar with this domain, it's not clear to me if this is a Firefox problem, or Ghost doing something incorrect with how it sets styling.

My educated guess would be that it relates to how stylesheets are being handled in the following:

<link rel="stylesheet" href="assets/ghost.min-2480c1148ca882fc017fc13b2253b5f3.css" title="light">
<link id="dark-styles" rel="alternate stylesheet" href="/ghost/assets/ghost-dark-c9fdcaba71e12a7f21ecc29eab306cc9.css" title="dark">

Before bug 1281135 landed, I see the above in the inspector, no matter which theme I have in use.

After landing, I see disabled="" on the dark-styles link if I'm in light mode, or disabled="" on both if I enable dark mode. This would appear to result in me getting no styling. I cannot remove the disabled from the dark sheet through the inspector -- it is immediately replaced if I do.

In the Chrome inspector I see disabled applied to whichever theme is not being used. In light mode the dark-styles will have the disabled attribute. In dark mode the light sheet on the first line will have the attribute.

Comment 1

[Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail]

I'm happy to aid in debugging this, since the STR are non trivial.

NI :emilio based on regressing bug.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

NP! Looks like they're open source: https://github.com/TryGhost/Ghost-Admin

Which helps a lot to figure out what goes on. Thanks for filing. For now, you should be able to toggle dom.link.disabled_attribute.enabled to roll back to the previous behavior.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

So they have this code:

    loadStyle(key, url, alternate = false) {
        return new RSVP.Promise((resolve, reject) => {
            let link = document.createElement('link');
            link.id = `${key}-styles`;
            link.rel = alternate ? 'alternate stylesheet' : 'stylesheet';
            link.href = `${this.ghostPaths.adminRoot}${url}`;

            link.onload = () => {
                if (alternate) {
                    // If stylesheet is alternate and we disable the stylesheet before injecting into the DOM,
                    // the onload handler never gets called. Thus, we should disable the link after it has finished loading
                    link.disabled = true;
                }
                resolve();
            };
    }

Which means that every time the load event fires, they disable the stylesheet. With my changes for bug 1281135, disabling the stylesheet makes it go away from the OM, and thus re-enabling fires the load event again.

This is consistent with what happens if the stylesheet has the stylesheet attribute when it's inserted in the DOM, rather than dynamically.

For now this is the only regression from that bug, so I think I'm going to try and send them a pull request.

Comment 4

[Bryce Seager van Dyk [:bryce] (he/him) - Not reading bugmail]

Thanks for the quick investigation! Sounds reasonable, and I'm able to mitigate the issue, so no problem on my end.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: GitHub Pull Request

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Fixed upstream.