CSS Transform Translate позиционирование отличается в Chrome и Firefox - PullRequest
Новая
       33

CSS Transform Translate позиционирование отличается в Chrome и Firefox

0 голосов
/ 15 декабря 2018

Привет, у меня проблемы с позиционированием псевдоэлемента на моем сайте.Оно правильно отцентрировано на видео о героях в Chrome, но в Firefox оно полностью направо.Это CSS: 

.hero-container {
  z-index: -1;
  position: relative;
  text-align: center;
  background-color: #fff;
  width: 100% !important;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}


.hero-container::after {
  content: 'Welcome Home.';
  z-index: 5000;
  background-color: rgba(36,88,141,0.7);
  color: #FFF;
  font-family: 'PTSerifRegular', verdana, arial, sans-serif !important;
  font-size: 40px;
  padding: 10px;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translate(-50%,-40%);
  transform: translate(-50%,-40%);
}

Это веб-сайт в процессе: http://ciminocarestg.wpengine.com/

Любые подсказки о том, как это можно исправить, или если есть лучший способ, которым это может бытьдостигнуто?Я использую Bootstrap (ну, UnderStrap) для сайта, и он построен на Wordpress, если это поможет.

Спасибо.

...