[Resolved] GP 2.0 bug? (Retina logo https problem)

[Zach]

After upgrading to GP 2.0 (current version is rc.1 as of posting date) I’ve noticed that the srcset attribute of the site logo isn’t creating a https link for the 2x version. Example:

srcset="https://www.zachpoff.com/site/wp-content/uploads/headphones-logo-64px.png 1x, http://www.zachpoff.com/site/wp-content/uploads/headphones-logo-128px.png 2x"

My server is set up to disable mixed content so my retina logo is dropping out. My apologies if this is actually some kind of server problem, but it seems like GP to me.
-Zach

[Tom]

Hi Zach,

Thanks for testing!

The URL should inherit the domain name set in “Settings > General”. Can you make sure both of those URLs have https?

[Zach]

I actually didn’t have those set to https! After I fixed them, the problem persisted (cleared cache, tried several browsers) until I removed / re-added the retina logo in Customizer. Now the logo appears. (It’s interesting that the 1x link was always https but the 2x link was http.)

One more problem: In Firefox 57 the div with class “site-logo” is too wide when viewed on retina screens. It matches the width of the original logo file (128px) instead of the scaled size that the logo actually appears (64px). Just to be clear, the logo is scaled correctly, but it’s parent div is too wide. (In Safari and Chromium this problem does not appear.)

-Zach

[Tom]

Yea – the Customizer saves the value that gets set by the uploader. If the value was set as http, it needs to be re-uploaded.

As for the other issue – can you link me to an example? I can’t reproduce that.

Let me know 🙂

[Zach]

https://www.zachpoff.com/site/
Compare Firefox 57 to other browsers. FF renders a lot of space between the logo and the site branding.
-Zach

[Tom]

Strange – I don’t have a retina screen, but Firefox Quantum allows us to mimic a retina screen by applying a device pixel ratio (DPR) of 2: https://www.screencast.com/t/VSxHNoiA

[Zach]

Here’s how it renders on my Macbook retina screen. (Firefox in the background, Chromium in the foreground.)
https://imgur.com/a/cAD87

FF Dev tools inspecting the div:
https://imgur.com/a/NHwTk

A Firefox bug perhaps? …
https://bugzilla.mozilla.org/show_bug.cgi?id=1270883
(links to duplicate bug with a lot more info, and a suggestion that it’s still a problem in FF58) May be worth investigating a workaround in the meantime?

[Tom]

Yes, looks like a long standing Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1149357

Can you test this as a workaround?

add_filter( 'generate_logo_attributes', 'tu_fix_firefox_logo_width' );
function tu_fix_firefox_logo_width( $atts ) {
    if ( function_exists( 'the_custom_logo' ) && get_theme_mod( 'custom_logo' ) ) {
        $data = wp_get_attachment_metadata( get_theme_mod( 'custom_logo' ) );

        if ( ! empty( $data ) ) {
            $atts['width'] = $data['width'];
            $atts['height'] = $data['height'];
        }
    }

    return $atts;
}

[Zach]

Works great. Thanks.

[Tom]

No problem! I’ll get this added into the core theme after some more testing.

[Tom]

2.0.1 was just released with this fix.

Thank you! 🙂

[Ethan]

Fixed. Sorry 🙂

[Tom]

No problem! 🙂

[Author]

Posts