CSS fluid image background not working in Firefox browser

Question

I am trying to implement fluid image background for one of my webpage. It works perfectly in Chrome but I can't get it to work in Firefox. I have png images of two squares which will resize proportionally when browser window is resized.

Here's the html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Test Flex</title>
</head>
<body>
<div id="parent_div">
    <div id="bluesquare_div"></div>
    <div id="yellowsquare_div"></div>
</div>
</body>
</html>

And here's the CSS:

body{
    background: #444444;
}

#parent_div{
    display: flex;
}

#bluesquare_div{
    width: 50%;
    background: url("bluesquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}


#yellowsquare_div{
    width: 50%;
    background: url("yellowsquare.png");
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 50%;
    flex-grow: 1;
}

The problem is I don't see any output in Firefox. If I don't use display:flex then I can see the two squares in Firefox, but my webpage requires the use of flexbox, so I can't drop it.

Anyone has any idea why its not working in Firefox ?

Here's the screenshot for Chrome version: 55.0.2883.87 m

And here's the screenshot for Firefox version: 50.1.0

on digging more, just came across this one: http://stackoverflow.com/questions/33502702/flex-elements-ignore-percent-padding-in-firefox — kukkuz, Dec 18 '16 at 08:02

score 3 · Answer 1 · answered Dec 18 '16 at 07:50

The issue is the padding-top: 50% given for the flex-items!

Margins / paddings are normally resolved against the width of the containing block instead of its height. But in the case of flexbox there is some confusion among the User Agents (browsers) - I guess:

Chrome resolves based on the width of flex-items
Firefox resolves based on the height of flex-items

See the warning in CSS Flexbox Spec:

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

Ideally you'll need to think of another way - maybe as a fix you can you viewport units for padding instead of percentages and you don't need height: 0 - see demo below:

body {
  background: #444444;
}
#parent_div {
  display: flex;
}
#bluesquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}
#yellowsquare_div {
  width: 50%;
  background: url("http://placehold.it/100x100");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 50vh;
  flex-grow: 1;
}

<div id="parent_div">
  <div id="bluesquare_div"></div>
  <div id="yellowsquare_div"></div>
</div>

CSS fluid image background not working in Firefox browser

1 Answers1