CSS Parallax фоновое изображение пробел в IE

Question

CSS Parallax фоновое изображение пробел в IE

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

Мой сайт разделен на два основных элемента div (и контейнер div) - один для фонового изображения, а другой для содержимого страницы. Ниже приведен код, который я использовал для различных div элементы.

.container {

  height: 100%;

  overflow-x: hidden;

  overflow-y: auto;

  perspective: 1px;

  position: absolute;

  left: 0;

  right: 0;

}



.background {

  background-image: url(images/background.jpg);

  background-size: cover;

  position: absolute;

  /* margin-bottom: -200em;

     overflow: hidden; */

  height: 200em;

  left: 0;

  right: 0;

  transform: translateZ(-2px) scale(3);

}



.page-content {

  transform: translateZ(0);

}

Без добавления свойств margin-bottom и overflow элемент background div будет иметь вертикальное пустое пространство, оставшееся после установки на высоту, достаточную для покрытия всего содержимого страницы.

После добавления отрицательного поля проблема была исправлена в Chrome и вроде как в Firefox*, и я увеличил высоту и отрицательное поле элемента div намного больше, чем требовалось, чтобы гарантировать, что он будет работать для другой страницы длины.

IE 11 все еще имеет там пустое пространство. Обычно СВОЙСТВО background-size: cover; удаляет любые пробелы, но это не работает с эффектом параллакса.

Знаете ли вы какие-либо способы удаления пробелов, которые могли бы работать для IE9+ и других основных браузеров, или мне не повезло?

Вот JSFiddle с почти точно таким же кодом, как и сайт, который я создаю.

*Firefox не имеет пробелов, но отрицательное поле отсутствует. работает правильно для всех длин страниц. Для более коротких страниц вы можете прокрутить путь, пройденный до конца содержимого страницы. Я мог бы исправить это, изменив высоту и поля для каждой страницы, но глобальное решение будет оценено, если это возможно.

627 2

css css3 whitespace background-image parallax

2 ответов:

Comments

Ничего не найдено.

user1477388 · Accepted Answer · 2015-04-21 17:22:27

Я думаю, что у вас есть несколько проблем, если ваша цель состоит в том, чтобы сделать эту работу на IE9. Это работает для меня, но не без увеличения высоты размера .back div.

Это работает для меня в IE9 и Chrome, но вы можете просто хотеть некоторые условия IE.

Http://jsfiddle.net/Lawrg9mv/21/

Дополнения:
.back {
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3);
}

.front {
    -ms-transform: translateZ(0);
    z-index: 10;
    position: relative;
}

Andrew Hansen · Accepted Answer · 2015-04-24 03:23:27

Не существует ни одного способа, чтобы получить параллакс CSS, чтобы работать в IE, но. Но поскольку браузеры на основе Webkit, такие как Chrome и Opera (я не тестировал Safari), хорошо работают с parallax, можно настроить таргетинг на браузеры Webkit и отображать фон parallax для них, а также отображать другой код - без параллакса - для других браузеров.

Во-первых, я помещаю параллакс-код в запросы @media, например:
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .container {
    [rule contents]
  }

  .background {
    [rule contents]
  }

  .page-content {
    [rule contents]
  }
}
Первый атрибут (-webkit-min-device-pixel-ratio:0) предназначен для всех браузеров на основе Webkit, но так как я предположим, что не все версии браузеров Webkit будут поддерживать этот эффект параллакса, я также добавил второй атрибут, который ограничивает браузеры Chrome 29+ и Opera 16+ (я исключил Safari просто для безопасности, но вы можете выбрать другой Хак, который также нацелен на Safari, Если вы обнаружите, что он работает).

Вероятно, было бы намного лучше использоватьобнаружение функций , но я еще не изучил JavaScript, и вышеописанное решение-только CSS.

После помещая правила параллакса в запрос @media, я устанавливаю альтернативное правило по умолчанию для элемента back div.

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

, Чтобы сохранить как можно больше сходства с параллакс версии, как это возможно, я установить фоновое изображение для position: fixed.

Потому что браузеры читают через CSS-файл сверху вниз и применяйте стили в этом порядке, важно, чтобы правило parallax .back (и его окружающий запрос @media) шли после стандартного, непараллаксного правила .back в файле.

И, конечно, я убедился, что все атрибуты, которые применяются как к стандартным, так и к правилам parallax .back, присутствуют только в стандартном, чтобы сэкономить место (они будут применяться браузерами Webkit наряду с дополнительными правилами в parallax версия).