3 ms·
By using position: fixed they bork themselves if the user scrolls during an animation. (Easily verified by scrolling while watching the demo.) This seems fixabl
by Tloewald 12y ago
By using position: fixed they bork themselves if the user scrolls during an animation. (Easily verified by scrolling while watching the demo.) This seems fixable (no pun intended) by not using position: fixed unless the start and end elements are themselves position: fixed (and possibly doing something clever if one is and the other isn't, such as capturing scroll events and updating the end-point coordinates).
- gtCameron 12y agoWhat browser are you using? I can scroll during animation in Firefox and Chrome on my Mac without any adverse effects to the animation
- clement75009 12y agoWorks fine for me too.
- Tloewald 12y agoI was using chrome on the Mac and easily got aberrations. I can see issues with morphing to/from svg in mobile safari but it's actually barely noticeable even when torturing the heck out of it. So really it's very good — just nitpicking.
- rich_harris 12y agoAre the aberrations related to transitions into or out of the SVG element (the purple box)? If so, I've just added an issue for that: https://github.com/Rich-Harris/ramjet/issues/6 https://github.com/Rich-Harris/ramjet/issues/6
- Tloewald 12y agoExactly — not a big deal, but worth fixing I think.
- rich_harris 12y agoIt uses position: absolute for HTML elements, but there's a position: fixed SVG, because that's the only sane way (that I've found so far) for morphing HTML into SVG and vice versa. If there's a reproducible bug please file a GitHub issue and I'll look into it!