3D scroll effect is causing crashes due to the mobile URL bar appearing and disappearing

36 views Asked by At

I have an issue with the mobile version of my portfolio.

I've implemented a 3D scroll effect using JavaScript, which works great on desktop but encounters problems on mobile due to the URL bar.

Here's the JavaScript code that calculates and displays the .frame elements based on the user's scroll position. However, the URL bar appearing and disappearing causes it to recalculate every time, leading to crashes or page reloads on some devices, especially older ones:

    var lastPos = window.scrollY || document.documentElement.scrollTop,
      perspective = 300,
      zSpacing = -500;
      zVals = [],
      $frames = $(".frame"),
      frames = $frames.toArray(),
    
      numFrames = $frames.length;
    
    
    
    for(var i=0; i<numFrames;i++) { zVals.push((numFrames-i)zSpacing);}
    
    $(window).scroll(function(d,e) {
    var top = window.scrollY  || document.documentElement.scrollTop,
        delta = lastPos - top;
    lastPos = top;
    for(var i=0;i<numFrames;i++){
      var newZVal = (zVals[i]+=(delta-1.5)),
          frame = frames[i],
          transform = "translateZ("+newZVal+"px)",
          opacity = newZVal < 200 ? 1 : 1 - parseInt((newZVal-200)/(perspective-200)*10)/10,
          display = newZVal > perspective ? "none" : "block";
      frame.setAttribute("style",
        "-webkit-transform:"+transform+";-moz-transform:"+transform+";display:"+display+";opacity:"+opacity);
    
    }
    });

Do you have any ideas or workarounds to bypass this issue with the URL bar?

If I hide the URL bar on my iPhone and then load the page, it works perfectly fine. Also, when using Safari with my iPhone connected, I don't get any specific error messages.

Here's the link to the mobile page (I've implemented a JavaScript redirection to a separate index for mobile devices initially because I thought the first parallax effect was too complicated):

https://www.gabrielconde.de/index-mobile.html

Any help would be greatly appreciated.

0

There are 0 answers