3

I have a parallax page with full height sections. Safari, Chrome and IE on Desktop the page works perfectly. But when viewed on a iOS device in Safari the next start pin is jumping a fixed size upwards. I am not quite sure how to debug this problem hence its behaviour on the smartphone.

Two screenshots have been included to show how the pin is displaced from its original position.

I have cut out a minimal part of the code which may be inadequate, but i am more than happy to fill this in if reproduction is difficult.

Fiddle: https://jsfiddle.net/utz97at6/

CSS

html, body {
    height:100%;
    height: 100vh;
    width: 100%;
    font-size:100%;
    background-color: #000;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

section {
    min-height: 100%;
    min-height: 100vh;
    min-width: 100%;
    background-color: none;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

HTML

<section id="section1"></section>
<section id="section2"></section>

JS

var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onLeave", duration: "100%"}});
    var tween = new TimelineMax();

    new ScrollMagic.Scene({triggerElement: "#section1", triggerHook: 0})
    .setTween(tween)
    .setClassToggle('#anchor1', 'active')
    .addIndicators()
    .addTo(controller);

    new ScrollMagic.Scene({triggerElement: "#section2", triggerHook: 0})
    .setTween(tween)
    .setClassToggle('#anchor2', 'active')
    .addIndicators()
    .addTo(controller);

enter image description here enter image description here

JavaCake
  • 4,075
  • 14
  • 62
  • 125

2 Answers2

1

The problem was solved by setting fixed height to the body and section elements. Due to the nature of Safari on iOS the height changes as your scroll and the url-bar and toolbar is collapsed, which causes problems with the responsive height variables.

JavaCake
  • 4,075
  • 14
  • 62
  • 125
1

The vh changes on safari/ios while scrolling because the scroll / url bar appears and disappears.

Solution: Don't use any vh in css like this: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

AND

Don't use percent values for the scene.duration.

Scrollmagic refreshs constantly the scene.duration when you use percent.

$(document).ready(function(){
const wi = window.innerHeight;
...
var scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.2,
    duration: wi * 3
  })
...
Lukas Zimmer
  • 11
  • 2