background-size: в Safari разрывы обложек, но не в Chrome - PullRequest
Новая
       33

background-size: в Safari разрывы обложек, но не в Chrome

0 голосов
/ 10 сентября 2018

У меня здесь временное приложение.

https://equator1248.herokuapp.com

Я убедился, что в Chrome все работает нормально, но в Safari мое фоновое изображение не отображается.

Соответствующий код отображается прямо: 

<html>
  <head>
    <link rel="apple-touch-icon" href="_images/favicon.png">
    <script type="text/javascript" src="arc.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
    <style>
      body{
        background-image: url('_images/background.png');
        background-size: cover;
      }
    </style>
  </body>
</html>

Походит на прямую собственность согласно:

* +1016 * -tricks.com / альманах / свойства / б / фон-размер /

Я могу заставить Safari работать, если уберу строку: 

background-size: cover;

но тогда у меня не получается нужный эффект укрытия.

Я только что проверил, что 

background-size: contain;

тоже его ломает.

Одно значение, такое как 400px, также нарушает его. Кажется, вам не нравится любое значение, которое вы даете собственности.

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Я думаю, что это не имеет ничего общего с background-size:cover, который полностью поддерживается в Safari , и в большей степени связан с тем фактом, что ваш веб-сервер отправляет изображения с неправильными content-type. Все изображения отображаются в моей консоли как txt, в то время как на других сайтах этого не происходит.

Console Screenshot

Источник: У меня (вероятно) те же настройки, что и у вас. Macbook Air, Safari, macOS High Sierra 10.13.6.

0 голосов
/ 10 сентября 2018

Попробуйте следующий код background-size: 100% 100%;, но это может привести к искажению фонового изображения в других браузерах (Chrome и т. Д.).

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

...