Используйте преобразование CSS на всей странице, включая фиксированные фоны (в Firefox)

Я создал script, который меняет размер моего сайта с некоторым соотношением: "крыса". Я делаю масштаб, но этот масштаб создает белые поля, поэтому я преобразую всю html-страницу, и я отправил ее в начало координат в координатах 0, 0.

document.documentElement.style.transform = "scale(" + rat + ")";
document.documentElement.style.width = 100 / rat + "%";
document.documentElement.style.transformOrigin = '0 0';

Проблема заключается в том, что некоторые фоновые изображения со следующим свойством не преобразуются:

background-attachment: fixed;

Каждый раз, когда я трансформирую мою html-страницу, фоновые изображения с background-attachment: fixed; не преобразуются.

Вы можете проверить, о чем я говорю в моем портфолио:

http://testedesignfranjas.tumblr.com/

Откройте сайт в хроме и в FIREFOX и увидите различия. Проблема в Firefox.

* извините за мой плохой английский

Ответ 1

У меня есть частичный ответ. Firefox не всегда правильно обрабатывает вложенные, фиксированные элементы при использовании преобразования. Вместо использования фонового привязки сделайте div с позицией изображения: исправлено. Второй div является относительным или статическим, поэтому он накладывает первый div.

<body onload="scaleAll(0.8)">
  <div id="img1">I have a background image, am scaled and am fixed.</div>
  <div id="outer">
     I have content and am scaled.
  </div>
</body>

Я переместил изображение за пределы div и установил img1 в положение: fixed. Сделайте масштабирование индивидуально, один раз для img1 и один раз для внешнего div, у которого есть контент.

<script>
function scale(rat, container) {
    var element = document.getElementById(container);
    element.style.transform = 'scale(' + rat + ')';
    element.style.transformOrigin = '0 0';
}   

function scaleAll(rat) {
    scale(rat, "outer");
    scale(rat, "img1");
}
</script>

Стиль использует положение: фиксированное для img1 и относительное для внешнего.

<style>
    div#outer { 
        position: relative;
        height: 900px;
        width: 900px;
    }
    #img1 {
        position: fixed;
        background: url("image.png") no-repeat;
        width: 796px;
        height: 397px;
    }
</style>

Пример JSFiddle

Ответ 2

Используйте jQuery для удаления атрибута "fixed" при масштабировании документа

$("img").each(function() {
$(this).css("background-attachment","");
});