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 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.
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.
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.
Works fine, thank you. Website is updated for you to check
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.
@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.
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
Give this a shot:
.depth_section {
overflow: hidden !important;
}
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.
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.
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.