The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS animation causing strange scroll effect, but only only on first child

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #256760

    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.

    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.


    Seems it just a thing with (former) Webkit browsers. Firefox is fine. Looks generally kinda odd in IE11.

    I’ll have another look at it myself…

    Edit – in any case, the SVG animation itself (not the parent) is triggering it. Very strange.


    As far as I can see, this is causing it somehow:

    .apex-statistics {
    align-items: center;

    Smells like a bug to me but someone with more knowledge on flexbox could likely help better.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.