search

cee-chen / object-fit-polyfill

A Javascript polyfill for browsers that don't support the object-fit CSS property.
ISC License
496 stars 93 forks source link

Adding display:none; on an element occasionally causes an error to be thrown #47

Closed AreYouSureYouKen closed 5 years ago

AreYouSureYouKen commented 5 years ago

We tried using this on one of our website to add object-fit:cover; functionality to the video being played. However, we hide this video when the user is on a mobile screen (below a certain width) by using display:none; This causes the polyfill to occasionally throw an error: Cannot read getPropertyValue of null

cee-chen commented 5 years ago

Hey hey! Generally this polyfill isn't scoped for advanced use cases like conditional rendering, lazyloading, etc (we expect the developer to add some logic on their part that only runs objectFitPolyfill() when the object is present and should be called).

In this scenario, while I totally get that CSS and media queries makes it easy to do display none, I'd suggest using Javascript to either conditionally render the video or conditionally apply the data-object-fit property.

Alternatively you can keep doing what you're doing and ignore the error - it's probably not creating any crashes or issues if the video is hidden anyway.