Your website doesn't work on
a phone or tablet? I can help.
Get in touch or View my work

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.

Upgrade your existing Shopify theme with Slate migrate

If you haven’t read about Shopify’s new theme development toolkit, Slate, check out the introductory post here. It provides you a starting set of files for developing your own custom Shopify theme along with handy build tools to speed up and optimize your workflow.

But what if you’re not starting from scratch? Whether you’re basing your work off an existing theme or supporting a client’s existing theme, there’s no doubt you’ve wanted to improve your development workflow at some point.

With Slate installed (npm install -g @shopify/slate), you can run slate migrate to convert an existing theme into the folder structure compatible with Slate.

CSS Specificity of *

I’ve been writing CSS for years. Sometimes — ashamed as I am to admit — I get snobby and feel I know it better than the back of my hand. This morning sent a shot of reality with something as simple as CSS specificity. In fact, many developers I work with were also surprised to learn this little bit of knowledge.

What I Do

  • Custom WordPress themes
  • User flow planning
  • Responsive web development
  • Facebook applications
  • Integrated SEO

Let's Work Together

Have a project in mind? Let me know about it and let's see if we can work together.

Get in touch