Animation behaving odd in FX when elements hit its containers boundaries.

[jimmykup]

http://codepen.io/jimmykup/full/Cbtni (original pen)
Edit http://codepen.io/jimmykup/full/BgAuv (updated pen, changed some things to make it easier to see what the problem is)

The goal was to use CSS to create these infinitely pulsating circles that grow and then fade out. I’ve offset them a little bit so that the pulsating originates from the bottom right of the container.

If you view the pen above in the latest Chrome it looks and acts exactly as I want it to. View it in the latest Firefox though and you get something else entirely. It looks like my animated divs will hit the inside of their parent container as they are growing. The animation will then finish growing from that collision instead of stretching outward beyond its containers bounds.

Yeah, I could definitely write this up in a more clean manner. This is just my first draft and I came across this inconsistent behavior. (Actually, if anyone has any tips on cleaning up the code I’d love to hear it, but that’s really secondary to getting it to work in FX.)

Anybody know what causes this to happen and how I can fix it to behave like Chrome?

(Works fine in Opera 17 too. Haven’t tested in IE10 or 11.)

[Merri]

margin: auto; is probably to core reason for the odd behavior. I’m not sure whether Firefox does it right and others do it wrong, but switching to traditional way of positioning absolute elements (ie. use margin-left and margin-top to move it) does fix it for Firefox while still working fine atleast on Chrome. The example made IE11 crash so badly it looks like I have to restart until I can use it again.

http://codepen.io/Merri/pen/avfEr

[paulob]

You could also fix it by extending the area outside the viewport for the pulse element.

.pulse {
    border-radius:100%;
    border:4px solid rgba(255,255,255,.5);
    width:100px;
    height:100px;
    opacity:0;
    margin: auto;
    position: absolute;
    top: -99em;
    left: -99em;
    bottom: -99em;
    right: -99em;
    z-index:0;
}

[Author]

Posts