Кроссбраузерность для бекграунд фотографии

Question

У меня есть бекграунд фотография, которая остается на месте в то время как остальной контент скролится по ней, но проблема в том, что на ios, она не подстраивается под эти стили, может есть какой-то другой способ или команды для таких случаев?

.page_body {
  background-attachment: fixed;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
 //Background-image - висит на тэге body

Answer 1

Очень странно, поскольку данная проблема согласно документации была решена начиная с > Safari 15.4 Я тоже когда-то сталкивался с похожей проблемой, но тогда это было критично и я решал через JS и фиксировал изображение на тег <img>. Ещё можете попробовать.

function supportsFixedBackground() {
  try {
    var style = document.body.style;
    if (!("backgroundAttachment" in style)) return false;
    var oldValue = style.backgroundAttachment;
    style.backgroundAttachment = "fixed";
    var isSupported = (style.backgroundAttachment === "fixed");
    style.backgroundAttachment = oldValue;
    return isSupported;
  } catch (e) {
    return false;
  }
}

body {
  background-attachment: fixed;
  background-image: url('https://u9on.github.io/our_wedding/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  animation-name: visible;
  animation-duration: 2s;
}

div {
  height: 500vh;
}

<div></div>

БЛОГ НА HUSL

Кроссбраузерность для бекграунд фотографии

Ответы (1 шт):