Фон жидкого изображения CSS не работает в браузере Firefox

Я пытаюсь реализовать жидкий фон изображения для одной из моих веб-страниц. Он отлично работает в Chrome, но я не могу заставить его работать в Firefox. У меня есть png-изображения двух квадратов, размер которых будет пропорционально изменяться при изменении размера окна браузера.

Вот 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>

А вот и 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;
}

Проблема в том, что я не вижу никакого вывода в Firefox. Если я не использую display:flex, то я вижу два квадрата в Firefox, но моя веб-страница требует использования flexbox, поэтому я не могу его удалить.

Кто-нибудь знает, почему он не работает в Firefox?

Вот скриншот для версии Chrome: 55.0.2883,87 m

Снимок экрана Chrome

А вот скриншот для версии Firefox: 50.1.0

Снимок экрана FireFox


html css flexbox fluid-images
person Kuldeep Kumar    schedule 18.12.2016    source источник
comment
копаясь дальше, только что наткнулся на это: firefox">stackoverflow.com/questions/33502702/   -  person kukkuz    schedule 18.12.2016

Ответы (1)


arrow_upward
3
arrow_downward

Проблема в том, что padding-top: 50% задано для flex-элементов!

Margins / paddings обычно разрешаются относительно width содержащего блока вместо его height. Но в случае с flexbox среди пользовательских агентов (браузеров) есть некоторая путаница - я думаю:

  1. Chrome разрешается на основе width гибких элементов

  2. Firefox разрешается на основе height гибких элементов

См. предупреждение в спецификации CSS Flexbox:

Авторам следует полностью избегать использования процентов в отступах или полях гибких элементов, поскольку они будут вести себя по-разному в разных браузерах.

В идеале вам нужно придумать другой способ — возможно, в качестве исправления вы можете использовать единицы просмотра для padding вместо процентов, и вам не нужно height: 0 — см. демонстрацию ниже:

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>

person kukkuz    schedule 18.12.2016