Установка высоты элемента или заполнения с помощью Scrollmagic на iOS - PullRequest
Новая
       23

Установка высоты элемента или заполнения с помощью Scrollmagic на iOS

0 голосов
/ 30 сентября 2019

Веб-сайт, который я программирую, имеет липкий заголовок, нижний отступ которого уменьшается при прокрутке страницы, а разделительный элемент маскирования поворачивается на угол 0 (используется для эффекта: в начале заголовок имеет клиновидную форму внизу).

https://kannerpsychiater.profitlich.ch/de/praxis/

Все работает нормально, но в iOS отступ появляется снова при небольшой прокрутке, прежде чем страница достигает своего верха. Это из-за сворачивающейся адресной строки , которую я уже обнаружил и протестировал (полностью скрывая панель). Вращение не нарушается, только отступы.

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

На рисунках слева показано, как должно быть, а справа - как это заканчивается на iOS.
Изображение проблемы: намерение против проблемы

Кто знает, как это сделатьиметь дело с этим?
Большое спасибо и наилучшие пожелания - Мориц 

headerTimeline = new TimelineMax();

// Reduce wedge angle to 0
var headerWedgeTween = TweenMax
.to("#header__wedge", 1, {
    rotation: 0,
    transformOrigin: 'right top',
    ease: Linear.easeNone
})

// PADDING
var headerPaddingTween = TweenMax
.to("#header", 1, {
    paddingBottom: headerPaddingSmall,
    ease: Linear.easeNone
})

headerTimeline.add(headerWedgeTween, 'first').add(headerPaddingTween, 'first');

headerMagic = new ScrollMagic.Scene({
    triggerElement: "header",
    triggerHook: "onLeave",
    offset: introDelay,
    duration: headerPaddingBottom
})
.setTween(headerTimeline)
.addTo(controller);
...