Skrollr Troubles With Chrome Browser

Question

Я изучаю, как использовать Skrollr.js library. Удивительный классный инструмент при использовании полосы прокрутки в DOM для управления внешним видом веб-сайта. У этого есть немного крутая кривая обучения, чтобы точно понять, как это работает. Я играю с простым образцом. У меня есть изображение, которое я хочу оставить на экране в фоновом режиме на 500% вертикальной высоты. У меня есть другие текстовые элементы, которые я хочу прокрутить на переднем плане. Я хотел сделать тест, и один из текстовых элементов исчезнет до нуля.

полезные ссылки: Classic Parallax Scrolling Example и I Hate Tomatoes Example

У меня есть изображение в DIV, загруженной в position: fixed; месте, и несколько дивы в области прокрутки ниже <div id="skrollr-body"> У меня есть текстовый заголовок, который я хотел исчезнуть до нуля, когда я использую полосу прокрутки. Примечание. Я начал skrollr.init() без каких-либо аргументов. Кроме того, я вообще не использую jQuery.

Моя проблема заключается в том, что Chrome работает неустойчиво и отлично работает в браузере Firefox. Я не понимаю, почему?

Я создал jsFiddle, чтобы показать проблему. http://jsfiddle.net/q3z3v6op/4/ Fiddle работает так же, как и моя тестовая программа; Flaky на Chrome, хорошо в Firefox. Когда вы смотрите в инструментах Chrome dev, вы можете легко увидеть, что значение прозрачности текста в красном поле правильно меняется на ноль, так как окно идет в верхнюю часть дисплея, но фактический дисплей не исчезает большую часть времени. Я могу заставить его работать, если я перейду к инструментам Chrome Dev, откройте ящик (где находится вкладка console/search/emulation/rendering), затем выберите «рендеринг» и нажмите [] Включить непрерывную перепечатку страниц.

Кто-нибудь еще был здесь? Любые идеи, что происходит с этой проблемой? Большое спасибо.

Answer 1

Я обновил вашу скрипку. Это немного другой подход, но он должен быть более совместимым с браузером. Я думаю, что Chrome не нравится display: block и opacity: 0. Это похоже на ошибку. Я тестировал в Safari (который также является WebKit), и у него нет проблем. Используя inline-block, я смог исправить ошибку в Chrome.

http://jsfiddle.net/christianjuth/q3z3v6op/5/

Исправлен код:

.hsContent { 
    display: inline-block; 
    position: absolute; 
    left: 50%; 
    width: 400px; 
    margin-left: calc(-200px - 8%); 
    color: #ebebeb; 
    padding: 0% 8%; 
    text-align: center; 
}