Aspect ratio of uncached responsive images not correct in Firefox

Problem/Motivation

In Firefox, responsive images are not getting a the proper padding-bottom applied on the div.media--blazy element, resulting in the image being displayed with the wrong aspect ratio.

This appears to be an issue occuring in JavaScript, specifically in blazy.drupal.js line 257 (var pad). When the image loads for the first time (i.e. it is not locally cached), the values for el.naturalHeight and el.naturalWidth are returning a value of 0. This results in the "pad" variable getting a value of NaN (not a number).

Steps to reproduce

(Occurs in Firefox but not in Chrome)

1. Create a responsive image style that has multiple breakpoints that use image styles with different aspect ratios. Use a single image style per breakpoint (do not use the sizes attribute).
2. Create a media display that uses the format Blazy Image. In the Responsive Image field assign the responsive style. In the Aspect Ratio assign "fluid." Other fields are left as default.
3. Clear caches for testing.
4. Place a large image that would span multiple breakpoints. Size the viewport to a smaller size and shift+refresh to load the page with a clear local cache. Upon first load, the div.media--blazy element does not have the proper padding-bottom applied. Debugging JS will show that the "pad" variable is NaN. Resizing the viewport or refreshing the page with the cached image will result in the padding "correcting" itself as some JS apparently runs calculations again. Debugging JS will show that "pad" is being calculated correctly.

Proposed resolution

Maybe add a fallback in JS to use clientWidth/clientHeight if naturalWidth/naturalHeight return 0. Or something else from someone who has more knowledge of JS and blazy.

Remaining tasks

User interface changes

API changes

Data model changes