Hero Header not scrolling on phone, iPad


Testing a site that isn’t live yet & a simple, quick layout for a local cause. Using F6 & Hero Header partial by Joe Workman.

The header scrolls just as I want on a desktop, but on an iPhone & iPad, nope! So many settings in the swatches, not sure if I’ve messed up something or have not found the correct setting.

I’ve searched all the prior topics, but no clues, so I need help.

Many thanks!



I suppose you are referring to the parallax effect? I have the same issue (working with Foundation). I’m afraid it’s something we have to live with.


The easiest way to get the parallax effect for backgrounds was a simple background-attachment: fixed; CSS statement.

Apple disabled this intentionally because of “computational cost due to the constant repainting of the browser’s canvas.”

There’s been a few “work arounds” done over the years some using JavaScript and another clever pure CSS one that uses CSS transform to get a similar effect.

Unfortunately Apple broke the pure CSS transform one with iOS 13.

Okay Apple if these new RISC processors are so good, why can’t they handle the computational power needed?

Is Safari the IE of the 2020’s?

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.