http://apexortho.srv1.devplace.us/
Bear with me here, this has been a doozy.
The problem:
The second section of this page has four pieces with animations on hover. Each of these animations functions properly, UNTIL the next section comes into the viewport, at which point only the first piece’s animation scrolls the page. Again, this effect only occurs when the next element is in the viewport.
Efforts:
We have tried numerous fixes to no avail. The container is set using VH, which can behave strangely at times, so we gave it a fixed height, but no luck. We put the elements in a container that was positioned absolutely in an attempt to take them out of the document flow entirely, but still it did not work. We tried other miscellaneous things like disabling all JS to assure there were no conflicts elsewhere, and we tried a slew of other fixes. It seems very inconsistent, where at times it will animate fine, then a short scroll later, we’re back to square one.
Our team has been stumped. We love CSS-tricks and Shop Talk, and thought this would be the best place to get some more heads wrapped around this. We are crossing our fingers that one of you beautiful folks will solve it immediately.
