I'm creating a new home page for my blog. It uses Keith Clark's Pure CSS Parallax, a couple flexboxes (basic code here), and this trick to center content vertically within a div.
Problem is that Keith Clark's Pure CSS Parallax doesn't do smooth scrolling (i.e., momentum scrolling) in iOS. I've discovered that the way to get smooth scrolling working in iOS is by using -webkit-overflow-scrolling: touch. But as soon as I try to apply that to my home page, it completely breaks my design on iOS. (BTW, this effect does NOT show up in OS X Safari's Responsive Design Mode—it appears to work fine. It's only when I actually load it on my iPhone that the design is broken.)
It looks like it breaks some of the transform styles. For example, it appears to essentially nullify -webkit-transform-style: preserve-3d.
I'm pretty new here, but have lurked long enough to know you guys like me to include a jsfiddle or some kind of example of my code. Honestly, I have no idea which part of my HTML or CSS might be causing the problem, and it would be tedious to copy ALL of my HTML and CSS here. Can you guys take a look at the code on the website I'm designing itself?
