Почему translateZ со скрытым переполнением вызывает небольшое смещение вправо? - PullRequest
Новая
       63

Почему translateZ со скрытым переполнением вызывает небольшое смещение вправо?

0 голосов
/ 17 июня 2020

Я пытался создать эффект параллакса, используя чистый CSS на основе Google Performant Parallaxing . Это предполагает использование perspective, translateZ и scale. Это также включает использование множества «слоев» изображений PNG, наложенных друг на друга. Однако на этих слоях возникла проблема.

В этом примере показан только один слой изображения PNG, потому что этого достаточно, чтобы показать проблему. Вот изображение проблемы (пробел в левой части div).

Problem

Проблема возникает в следующей ситуации: вертикальная полоса прокрутки body видна, горизонтальная полоса прокрутки body скрыта из-за переполнения, а для изображения с параллаксом установлена ​​ширина 100%. Как ни странно, эту проблему можно решить, просто установив ширину изображения 100vw вместо 100%. Вот код, показывающий проблему. 

html, body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

body {
  perspective: 100px;
}

.background {
  width: 100%;
  height: 101vh;
  background: url('https://i.pinimg.com/originals/13/17/ba/1317ba3fb0901d7b6be59f9c21d39d12.jpg');
  transform: translateZ(-300px) scale(4);
}
<div class="background"></div>

Почему появляется пробел на изображении, если его ширина составляет 100%, а не 100vw?

1 Ответ

1 голос
/ 17 июня 2020

100% учитывает ширину внутреннего окна за вычетом полосы прокрутки (вычисленная ширина 1903 пикселей для меня), тогда как 100vw учитывает ширину всего окна просмотра без учета полосы прокрутки (вычисленная ширина 1920 пикселей для меня).

Причина, по которой 100vw «работает» здесь, в том, что изображение на 17 пикселей больше, чем его копия. Он также работает со 100% шириной и высотой ниже 100vh, поскольку полоса прокрутки уходит, а 100% равно 100vh.

Когда вы добавляете translateZ с отрицательным значением, элемент, который вы переводите, становится визуально меньше так что разрыв, который вы видите, является продуктом этого. Если вы хотите, чтобы изображение заполнило экран, используйте меньшее значение в преобразовании или большее значение в масштабе или ширине.

...