Safari v14 Released Today with a Bug that Affects Parallax Scrolling

So it looks like Apple decided to push Safari v14 out of the door before Big Sur is even ready. Unfortunately a bug that I’ve seen in the Big Sur betas since day one shipped in this version of Safari.

The bug relates to the use of parallax scrolling using Javascript, which is done in the Banner and Backdrop stacks.

I’ve pushed out a hack for each of these two stacks this morning in Foundry v2.2.2.0 and Potion Pack v2.0.5 to tackle the part of the bug that I might be able to control. Since the bug is on Apple’s end I can’t fix their end of the bug – I can only work around it.

Note I’ve also update Foundry v1 to fix this bug in Banner as well for v1 users. This will be in v1.3.4.7.

No matter what version of Foundry and Potion Pack you’re using, the updating will be the same. update in Stacks using the updater, then quit and restart RapidWeaver once the update(s) are complete. After doing so you’ll need to Republish All Files from RapidWeaver. This is just to make sure everything gets updated.

As I said, this will take care of the parallax image over shooting the bounds of the Banner and / or Backdrop stacks, which is the most egregious part of the bug. I’ve seen the image seem to ‘hiccup’ every now and again when scrolling. I suspect this is Safari v14’s interaction with the javascript library Jarallax. Perhaps in the future I can transition to a different parallax method if Apple does not address the root of the problem. I’ll have to see if anything else out there works in Safari v14 and has the same feature set as Jarallax.

For now though these updates should address the problem.

5 Likes

Thanks for the very quick update!

1 Like

Hi Adam, thank you for this update.

FYI, while not a huge issue for me, when using Nav Bar Pro in sticky mode, once you pass the banner the navigation disappears.

Here is one example: Northgate | Online | Northgate U

I have updated, quit RW and republished all files. More than likely I’ll just disable the parallax effect on all pages.

Yeah, I can see why that would stop working. I’ll have to reassess. There may simply not be a good solution.

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.

1 Like

Just to be clear on two things –

  • This isn’t limited to just mine and Nick Cate’s stacks.
  • The fix I pushed out does not completely fix the problem. I don’t think I can as it is a bug with Safari itself. No other browsers show this problem that I’ve seen. This fix is just to get people by for now.

My suggestion – if you can live without Parallax backgrounds and are concerned with Safari v14 compatibility, turn Parallax off for now.

I just pushed out Foundry v2.2.3 and Potion Pack v2.0.6 to the update server. While the updates yesterday were quick fixes to hopefully get something working, in whatever limited capacity, out there for users, these updates today both contain a more robust solution to the parallax problem Apple introduced in Safari v14.

Sorry you’ll need to update and republish again.

Update the Foundry and Potion Pack stack in the Stacks plugin’s updater, then quit and restart RapidWeaver once the update(s) are complete. After doing so you’ll need to Republish All Files from RapidWeaver. This is just to make sure everything gets updated.

3 Likes

Thank you :+1: that is a great customer service!

2 Likes

Thanks @Fuellemann. Really stinks having to deal with a situation like this due to a bug in a browser. Especially when the bug didn’t exist in the previous version of the browser. I hope this workaround is sufficient going forward against any other changes they might make in Safari v14. Guess we’ll see and make adjustments if needed.

4 Likes