freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
I just found the demo page on an article and noticed the image jumps a bit when pausing, so I decided to look into it and found that the way the width and height are read is what a property that only supports integers. With responsive widths it's common to have floating point numbers, so getClientRects() has a much cleaner result. Hope this helps, I'll definitely be trying this library if I ever have a gif somewhere (:
Edit: just noticed this doesn't yet fully fix it on the 2nd example on the demo page, maybe inline-styles should be used to set the dimensions of the canvas? implemented and hopefully works now, also added explanations in the commit
I just found the demo page on an article and noticed the image jumps a bit when pausing, so I decided to look into it and found that the way the width and height are read is what a property that only supports integers. With responsive widths it's common to have floating point numbers, so
getClientRects()
has a much cleaner result. Hope this helps, I'll definitely be trying this library if I ever have a gif somewhere (:Edit: just noticed this doesn't yet fully fix it on the 2nd example on the demo page, maybe inline-styles should be used to set the dimensions of the canvas?implemented and hopefully works now, also added explanations in the commit