Почему не работает в хроме?

347
03 июня 2021, 15:50

Есть сайт: http://demo.infinity-web.site/max4/ Проблема в шапке, в хромиум-басед браузерах не подгружается деккорация.

Ниже скриншот из фаерфокса, так и должно быть.

Ниже скриншот из вивальди, так быть не должно.

Код CSS/HTML:

header .main-container { 
  position: relative; 
} 
 
.main-screen-phone { 
  font-size: 33px; 
  font-weight: bold; 
  line-height: 1.2; 
} 
 
header { 
  position: relative; 
} 
 
.main-nav { 
  padding-top: 92px; 
  display: flex; 
  justify-content: space-between; 
} 
 
.main-screen-section, 
.main-nav { 
  position: relative; 
  z-index: 15; 
} 
 
header .logo { 
  width: 444px; 
  height: 111px; 
} 
 
header .logo-title { 
  font-size: 23px; 
  color: rgb(0, 0, 0); 
  line-height: 1.2; 
} 
 
header .phone { 
  position: relative; 
  font-weight: bold; 
  font-size: 44px; 
  padding-right: 90px; 
} 
 
header .phone:hover { 
  transform: scale(1.3); 
} 
 
header .phone::after { 
  content: ''; 
  position: absolute; 
  top: -15px; 
  right: 0; 
  width: 64px; 
  height: 64px; 
  background-image: url('../img/main-screen-phone-decor.svg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  z-index: 1; 
} 
 
header::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 692px; 
  background-image: -moz-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%); 
  background-image: -webkit-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%); 
  background-image: -ms-linear-gradient( -44deg, rgb(255, 110, 2) 0%, rgb(255, 238, 51) 0%, rgb(255, 224, 26) 47%, rgb(255, 210, 0) 100%); 
  z-index: -1; 
} 
 
header .main-container::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 1406px; 
  height: 692px; 
  background-image: url('../img/main-screen-decor-white.svg'), url('../img/main-screen-phone-decor-two.svg'); 
  background-size: contain, 680px 522px; 
  background-repeat: no-repeat, no-repeat; 
  background-position: 0 408px, 602px -90px; 
  z-index: 1; 
}
<header> 
  <div class="main-container"> 
    <nav class="main-nav"> 
      <div> 
        <img class="logo" src="img/logo.svg" alt="логотип: мощные пылесосы для маникюра и педикюра"> 
      </div> 
      <p class="phone"><a href="tel://+7 800 555 17 69">+7 (800) 555 17 69</a></p> 
    </nav> 
    <section class="main-screen-section"> 
      <div class="main-text-container"> 
        <h1 class="main-screen-utp">Настольный пылесос для маникюра Max <span lang="en">Ultimate</span> 4 со сверхмощностью 65 Вт от производителя 
        </h1> 
        <b class="main-screen-lead">Забудьте, что такое маникюрная пыль навсегда и позаботьтесь наконец о своём здоровье</b> 
        <div class="main-screen-btn-container"> 
          <a class="btn" onclick="showPayForm()">Заказать пылесос</a> 
          <a class="btn" href="#about">Узнать подробнее</a> 
        </div> 
        <h2 class="main-screen-part-two-title"><span lang="en">Max Ultimate 4</span> станет вашим надежным помощником</h2> 
      </div> 
      <div class="main-screen-poster"> 
        <img class="" width="810" heigh="810" src="img/poster-mainscreen.png"> 
        <a onclick="showYu()"><img class="main-screen-poster-play" src="img/main-screen-poster-decor.svg"></a> 
      </div> 
      <ul class="main-screen-list"> 
        <li> 
          <div class="container"> 
            <p>Пыль вредна</p> 
            <p class="title">Отлично впитывает маникюрную пыль</p> 
          </div> 
        </li> 
        <li> 
          <div class="container"> 
            <p>Избавьтесь от маски</p> 
            <p class="title">Удобный регулятор оборотов</p> 
          </div> 
        </li> 
        <li> 
          <div class="container"> 
            <p>Гарантия</p> 
            <p class="title">Гарантия 24 месяца</p> 
          </div> 
        </li> 
        <li> 
          <div class="container"> 
            <p>Тихая работа</p> 
            <p class="title">Избавьтесь от маски для лица</p> 
          </div> 
        </li> 
        <li> 
          <div class="container"> 
            <p>Мощнее обычного</p> 
            <p class="title">В 4 раза мощнее обычного маникюрного пылесоса</p> 
          </div> 
        </li> 
      </ul> 
    </section> 
  </div> 
</header>

Answer 1
проще всего svg конвертировать в png
background-image: url('../img/main-screen-decor-white.png'), url('../img/main-screen-phone-decor-two.png');
либо открываем svg в редакторе и меняем
xlink:href="data:img/svg;
на
xlink:href="data:image/svg;
READ ALSO
Увеличить время для hover`a

Увеличить время для hover`a

Есть код, как увеличить время возврата в первоначальное положение, те

82
Скрипт поведения камеры

Скрипт поведения камеры

Есть у кого скрипты поведения камеры? У меня на Unity, реализовано что то вреде плеера, который в зависимости от настроек проигрывает сценыИ...

163
Сломанные биндинги

Сломанные биндинги

Пишу проект на архитектуре MVVMВ интерфейсе есть биндинги

112
Проверить существование объекта c# [дубликат]

Проверить существование объекта c# [дубликат]

Делаю десериализацию массива jsonЕсть следующий код:

119