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.
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.
@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.
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.
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.
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
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.
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.
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.