Nick Cates 'Depth' parallax scrolling issues with new Safari release

Anyone who has @nickcates Depth projects might want to check parallax scrolling on the new update to Safari (14.0). All fine on other browsers but significant issue on Safari 14.0. I have only checked running Catalina 10.15.6.

I have flagged to Nick and hope that, despite moving on from Rapidweaver, he can take a look.

So far not seen Safari 14 parallax scrolling issues anywhere else but will look around.

1 Like

I believe this to be a Safari bug. I’ve seen it with my products in the Big Sur betas as well and tried filing a bug report for it.

3 Likes

Can we file this bug at Apple as well, is there a URL to do so? I will change the setting to LockBackground for my Foundry projects.

You can try submitting a bug report to Apple: https://www.apple.com/feedback/safari.html

I’d hoped that they’d have fixed it before releasing a final version of Big Sur, but since they decided to push Safari v14 out, in less than stellar shape, ahead of Big Sur I’d guess it isn’t being fixed and we’ll have to find a hack to work around it.

I might have a fix for it.

@Fuellemann and @manofdogz – can you send me a link to the page where you’re having the problem and point me to the stack you’re having the problem with on the page? If so I’ll shoot you some text CSS to test out.

If it works I can ship this change in my stacks that use parallax for background effects.

1 Like

I send you a pm here in this forum

As a test, add the following CSS to that page:

.banner {
   overflow: hidden !important;
}

The !important may not be needed, but it will help make sure nothing else undoes it for our test.

Now, this fix only prevents the image from running outside the bounds of the stack. There’s still oddities with how Safari is handling the image at times it seems, so the image can act flaky, but this prevents the most egregious of the problems with this Safari update as it pertains to parallax.

2 Likes

Works fine, thank you. Website is updated for you to check

1 Like

I’ll ship this fix in Banner and Backdrop. I don’t know why I overlooked this simple fix until now. Like I said, I think this Safari bug is deeper than just this overflow bug, but this should fix the most visible part of the problem.

3 Likes

@manofdogz – if you send me a link and point out the stack on the page I can send you what class to target to see if we can fix it for you as well.

1 Like

Thanks Adam - This project is using Depth Sections and Depth theme from Nick Cates : The issues happen on Depth ‘Sections’ that i am using throughout (i.e. not using a theme banner). https://thelodgetreehouse.co.uk

2 Likes

Give this a shot:

.depth_section {
    overflow: hidden !important;
}
3 Likes

One thing to note about this fix for the Banner and Backdrop stack in Foundry and Potion Pack – If you have a navigation bar set to be “sticky” that resides in the Banner or Backdrop stack, and you have Parallax enabled, the navigation will disappear as you scroll down the page. This is a result of hiding the overflow of the Banner and Backdrop stacks to fix Apple’s Safari v14. bug.

I might have a solution for this. It is a bit more complex than the simple stop gap from this morning. I need to do some more testing though. Currently it seems to fix the problem in Safari v14. The parallax effect becomes ever so slightly choppy in Safari v13 though. It still works, it just isn’t as smooth as normal.

I’ll continue working on this tomorrow and see if I can’t refine it some more. I may enlist some help from some of you to test things out before pressing forward with another update. Hopefully that sounds like a plan.

3 Likes

Adam: I am wanting to try your suggested text CSS on my sites. I have 62 pages using Depth Sections and Depth theme from Nick Cates. Where would I put your test .depth_section code?

You’d put it in the Custom CSS field. Since your sections span multiple pages you’d use the Code section in your project’s site wide settings. Not at my computer right now otherwise I’d give you a screenshot.

1 Like

Adam: Thank you so much for the quick reply. I will give it a try!

Thanks Adam - unfortunately not working but look forward to any other suggestions.

Send me a zip file containing your project file and depth stacks and I’ll take a look later today when I get to the office. Send it to adam at elixirgraphics dot com

Alright with a project file for Depth in hand, along with the stacks I’ve done some experimenting. The prognosis isn’t great though. While the parallax library used in Depth is the same as the one used in my stacks, it doesn’t seem to be applied in the same way, so a quick CSS fix is likely out for this.

I have been working on re-writing some of the parallax library though to put in some checks for Safari v14 and to apply things slightly differently. I’ve tested this updated parallax library in Depth and it seems to work so far. You can see an example of my updated library applied to a test project using Depth, here: https://elixirgraphics.com/test/test-for-depth

I need to continue testing my changes today, but if @nickcates would be ok with it I could provide him the updated library and he could apply it to his stack and push out an update. I’d want him to look it over though and make sure it is A-OKAY for him before doing so though.

3 Likes