Разрыв, созданный полосой прокрутки в сайтах прокрутки параллакса CSS

Question

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

Виновником, насколько я могу судить, является полоса прокрутки. Эта полоса прокрутки должна быть там (внутри родительского div параллакса), но она создает разницу между размером родительского контейнера (в котором отображается трехмерное пространство) и размером дочерних элементов параллакса контейнеров, что оставляет место для этот разрыв. Я вижу это в последних версиях Chrome, Firefox и Safari (хотя я мог поклясться, что не видел его там даже год назад).

Это может быть исправлено путем применения width: 100vw Правило для каждой группы или слоя параллакса. Но в то время как это очищает разрыв, это помещает элементы вне выравнивания с центром представления по умолчанию (и так с любыми элементами, которые также не имеют 100vw Правило применяется к ним). Я также хотел бы, чтобы решение, которое в максимально возможной степени придерживалось принципа "чистого CSS".

HTML взят из примера Кейта Кларка:

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div>Base Layer</div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div>Background Layer</div>
    </div>
  </div>
</div>

CSS:

.parallax { // parent, page-level container
    height: 500px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
}

.parallax__group {
    position: relative;
    height: 500px;
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
}

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}

.parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
}

Answer 1

Я пришел с некоторыми решениями и поместил их на пример веб-сайта здесь: https://dawaltconley.github.io/parallax-gap-fix/.

Кажется, что проблема возникает только с определенными системными полосами прокрутки Mac, которые появляются, когда пользователь подключает USB-мышь (как я их нашел) или меняет Show scroll bars в Always в их настройках. Эта полоса прокрутки, в отличие от прозрачного трекпада, изменяет внутреннюю ширину элемента страницы параллакса, но не общий размер, в котором отображается трехмерное пространство для элементов параллакса.

Изменение perspective-origin а также transform-origin свойства к left перераспределяет элементы параллакса без изменения размера. Это было бы идеальным решением, за исключением того, что Safari, похоже, рассчитывает трехмерное пространство не так, как большинство современных браузеров, и ему нужно, чтобы эти свойства были установлены на center выровнять все правильно.

Лучшее решение, которое я нашел для всех браузеров, - это добавить следующие правила в .parallax__group элемент:

.parallax__group {
    margin-left: calc(100% - 100vw);
    margin-right: calc(100% - 100vw);
    padding-left: calc(100vw - 100%);
    padding-right: calc(100vw - 100%);
}

Разница между 100vw а также 100%от любого ближайшего ребенка .parallax элемент, ширина полосы прокрутки. Установка отрицательного правого поля для этой ширины расширяет элементы параллакса до той же ширины, что и страница, удаляя зазор по краю экрана. Установка этого значения в левое поле растягивает элементы немного больше, чем необходимо, но это необходимо для выравнивания центра трехмерного пространства с центром остальной части страницы.

Должна быть возможность компенсировать этот раздув, применяя аналогичные правила к .parallax__layout класс, но несоответствия Safari затрудняют это, так как не раздутый элемент должен быть идеально выровнен, чтобы избежать пробелов в макете.

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