Firefox flex-basis: auto and srcset bug on retina screens

I ran into a problem with a customer’s site specifically on Firefox (on Mac). Their logo was setup to use a 2X retina size and srcset to show it properly on retina devices. Our specific layout used flexbox, and on the logo’s container, flex-basis: auto.

But in Firefox we saw this:

Firefox srcset and flex-basis bug example

The parent of the image was being set to 400px, exactly twice as large as the image loaded in was. After a bit of exploration I came across this bug opened up with Firefox three years ago. With no fix in sight from the browser, I needed to find a workaround.

The relatively easy fix is to add a max-width of the logo’s width to the parent container (either the img‘s wrapping tag, or the div being given the flex-basis: auto).

Here is a JSFiddle of the problem and the fix.

On Shopify

On our Motion Shopify theme, however, we use a height setting that the store owner can change so knowing the width can be a challenge.
We get the height value from the settings with this line, and prepend the x to use a height-only size parameter:

{%- assign header_logo_size = block.settings.desktop_logo_height | prepend: 'x' -%}

Now we have something like 50x, which means give us an image 50 pixels tall, and what ever width that happens to be. So we need to solve for that width. We can do this by leveraging the known height and the image’s aspect ratio.

By using the formula width = height * aspect ratio, we get this line:

{%- assign logo_width = block.settings.desktop_logo_height| times: block.settings.logo.aspect_ratio -%}

Now we can use logo_width as an inline max-width where we need it.

One comment on “Firefox flex-basis: auto and srcset bug on retina screens

  1. Chandan Chakraborty April 14th, 2018
    at 9:56 am


    Thanks for Sharing excellent Information about “Firefox flex-basis: ”, I love your article. I will definitely share your article on my social networks.  
    Well, Hi, I am Chandan, a freelance php developer in kolkata India, providing services globally with established agencies and start-ups and serving people with the best web solutions of modern times. I am working full time for my self.
    Again thank you!
    Keep sharing this type of article!

Leave a Reply