Forums

Give help. Get help.

  • # July 12, 2017 at 12:18 pm

    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.

    # July 12, 2017 at 1:26 pm

    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.

    # July 12, 2017 at 5:24 pm

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag