Баг flexbox и абсолютного позиционирования в Firefox

365

08 января 2017, 18:26

Собственно, вот скриншот проблемы.
Сверху в низ: 1 - Chrome, 2 - Opera, 3 - Firefox, 4 - Edge.

Ниже я привел запускаемый (надеюсь) код.
Для супер-максимального удобства, вот codepen. На нем, мне кажется, удобнее.

Основная идея такая: надпись Gallery и логотип позиционировать в центр, а остальные - по бокам, но чтобы их размеры не учитывались для центрирования двух главных элементов надписи и логотипа.
transform будет использован для анимации, поэтому всё равно нужно позиционировать в центр и оттуда направлять остальные категории.

Безмерно буду благодарен, если поможете разобраться, как поддерживать flex в Firefox без обхода и переписывания всего кода позиционирования.

.gallerypage { 
  margin: 0; 
  padding: 0; 
  background: #fff; 
} 
 
.gallerypage .header { 
  position: relative; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-flow: row nowrap; 
      -ms-flex-flow: row nowrap; 
          flex-flow: row nowrap; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
      -ms-flex-align: center; 
          align-items: center; 
  width: 100%; 
  height: 100px; 
  background: gray; 
} 
 
.gallerypage .header a { 
  cursor: pointer; 
  position: absolute; 
  -webkit-flex-shrink: 0; 
      -ms-flex-negative: 0; 
          flex-shrink: 0; 
  text-align: center; 
  white-space: pre-wrap; 
  text-indent: -6px; 
  line-height: 30px; 
  font-family: "Kaushan Script", cursive; 
  font-size: 30px; 
} 
 
.gallerypage .header .sketches { 
  background-color: #fff; 
  width: 110px; 
  -webkit-transform: translate(-400px, 0px); 
      -ms-transform: translate(-400px, 0px); 
          transform: translate(-400px, 0px); 
} 
 
.gallerypage .header .smth { 
  background-color: #fff; 
  width: 140px; 
  height: 60px; 
  -webkit-transform: translate(-200px, 0px); 
      -ms-transform: translate(-200px, 0px); 
          transform: translate(-200px, 0px); 
} 
 
.gallerypage .header .gallery { 
  position: static; 
  text-indent: -14px; 
  line-height: normal; 
  width: 185px; 
  height: 90px; 
  background: gold; 
  font-size: 60px; 
} 
 
.gallerypage .header .logo { 
  position: static; 
  width: 60px; 
  height: 80px; 
  background: hotpink; 
} 
 
.gallerypage .header .logo .vs-logo { 
  display: block; 
  -webkit-flex-shrink: 0; 
      -ms-flex-negative: 0; 
          flex-shrink: 0; 
  width: 60px; 
  height: 80px; 
} 
 
.gallerypage .header .blog { 
  background-color: #fff; 
  width: 60px; 
  height: 38px; 
  -webkit-transform: translate(200px, 0px); 
      -ms-transform: translate(200px, 0px); 
          transform: translate(200px, 0px); 
} 
 
.gallerypage .header .about { 
  white-space: pre-wrap; 
  background-color: #fff; 
  width: 100px; 
  -webkit-transform: translate(400px, 0px); 
      -ms-transform: translate(400px, 0px); 
          transform: translate(400px, 0px); 
}

<div class="gallerypage"> 
  <div class="header"> 
    <a class="sketches">Sketches</a> 
    <a class="smth">Something serious</a> 
    <a class="gallery">Gallery</a><a class="logo"></a> 
    <a class="blog">Blog</a><a class="about">About it</a> 
  </div> 
</div>

Answer 1

Я удалил неуместные position: absolute; и transform на данном примере.

Вот решение чтобы элементы выглядели приблизительно как у вас на скриншоте, основанное на вашем коде.

@import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); 
 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.header { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background: gray; 
  padding: 5px; 
} 
 
.header a { 
  cursor: pointer; 
  text-align: center; 
  white-space: pre-wrap; 
  font-family: "Kaushan Script", cursive; 
  line-height: 1; 
  font-size: 30px; 
} 
 
.header .sketches { 
  background-color: #fff; 
  width: 110px; 
  margin-right: 5%; 
} 
 
.header .smth { 
  background-color: #fff; 
  width: 140px; 
  height: 60px; 
  margin-right: 1%; 
} 
 
.header .gallery { 
  width: 185px; 
  height: 60px; 
  padding: 15px 0; 
  background: gold; 
  font-size: 60px; 
  margin-right: 1%; 
} 
 
.header .logo { 
  width: 60px; 
  height: 80px; 
  background: hotpink; 
  margin-right: 5%; 
} 
 
.header .blog { 
  background-color: #fff; 
  width: 60px; 
  height: 38px; 
  margin-right: 5%; 
} 
 
.header .about { 
  background-color: #fff; 
  width: 100px; 
}

<div class="header"> 
  <a class="sketches">Sketches</a> 
  <a class="smth">Something serious</a> 
  <a class="gallery">Gallery</a> 
  <a class="logo"></a> 
  <a class="blog">Blog</a><a class="about">About it</a> 
</div>

Для того, чтобы .gallery и .logo были чётко по центру обернём их отдельным div с классом .center. Остальные элементы (слева и справа) обернём в div с классом .half. Присвоим для .half flex: 1; чтобы элементы занимали оставшуюся ширину. Готовый пример:

@import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); 
 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.header { 
  display: flex; 
  background: gray; 
  padding: 5px; 
} 
 
.half, .center { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.half { 
  flex: 1; 
} 
 
.header a { 
  cursor: pointer; 
  text-align: center; 
  white-space: pre-wrap; 
  font-family: "Kaushan Script", cursive; 
  line-height: 1; 
  font-size: 30px; 
} 
 
.header .sketches { 
  background-color: #fff; 
  width: 110px; 
  margin-right: 5%; 
} 
 
.header .smth { 
  background-color: #fff; 
  width: 140px; 
  height: 60px; 
  margin-right: 1%; 
} 
 
.header .gallery { 
  width: 185px; 
  height: 60px; 
  padding: 15px 0; 
  background: gold; 
  font-size: 60px; 
  margin-right: 1%; 
} 
 
.header .logo { 
  width: 60px; 
  height: 80px; 
  background: hotpink; 
  margin-right: 5%; 
} 
 
.header .blog { 
  background-color: #fff; 
  width: 60px; 
  height: 38px; 
  margin-right: 5%; 
} 
 
.header .about { 
  background-color: #fff; 
  width: 100px; 
}

<div class="header"> 
  <div class="half"> 
    <a class="sketches">Sketches</a> 
    <a class="smth">Something serious</a> 
  </div> 
  <div class="center"> 
    <a class="gallery">Gallery</a> 
    <a class="logo"></a> 
  </div> 
  <div class="half"> 
    <a class="blog">Blog</a> 
    <a class="about">About it</a> 
  </div> 
</div>