Прокрутка Parallax на Material Design Lite не работает?

Question

Прокрутка фона Parallax, похоже, не работает на Material Design Lite. Или я делаю это неправильно.

Это моя проблема: https://i.imgur.com/6YbSkm5.png

Огромный пробел в середине не отображается фоновое изображение или фон: Я даю его при тестировании его на экране HiDPI. Однако он работает на других размерах экрана, таких как MDPI и более мелкие (по крайней мере, в соответствии с Chrome). Я попытался с помощью отдельного .parallax класса со следующим:

.parallax{ 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover; 
} 

, но это не сработало равно как и не работать с кодом, которая находится в изображении.

Я использую структуру Material Design Lite, и я думаю, что это вызывает проблему. Когда я перехожу в представление Inspect Element и удаляю оба дисплея: flex и display: webkit-flex в классе .mdl-layout, он работает.

Answer 1

Паралакс не работает из-за проблемы с настройками переполнения css в MDL.

Есть два способа крепления его: 1. Изменение параметра переполнения в MDL CSS 2. Высота Карта сайта/прокрутки DIV с классом .mdl-layout__content

, например, для событий на свитке:

$('.mdl-layout__content').on('scroll', function() { 

Answer 2

для того, чтобы дать возможность Parallax Scrolling в Material Design Lite, изменить высоту класс леев-layout__container от 100% до авто.

.mdl-layout__container { 
    height: auto; 
} 

Answer 3

Попробуйте прокомментировать, как показано ниже, в файле material.css.

.mdl-layout__container { 
    /* position: absolute;*/ 
    width: 100%; 
    height: 100%; } 

Это может привести к не фиксированный заголовок и ящик, поэтому мы должны решить эту проблему. :)