junkboy0315/react-compare-image

ResizeObserver is not defined

jacintofleta opened this issue · 2 comments

jacintofleta commented

Hi,

I'm getting this error when using Firefox for Android: ResizeObserver is not defined

Website are not loading properly in Firefox for Android (the page gets blank).

../node_modules/react-compare-image/dist/bundle.js in d at line 1:2326:

{snip} useRef)(null);Object(n.useEffect)(()=>{const e=D.current,t=new ResizeObserver(([e,...t])=>{const r=e.target.getBoundingClientRect().width;S( {snip}

I'm not sure if this helps.

Thank you.

junkboy0315 commented

Hi, @jacintofleta

I dropped dependency of css-media-queries package from v3
as ResiseObserver is now supported by almost all modern browsers.
https://github.com/junkboy0315/react-compare-image/releases/tag/v3.0.0

If you have problem, you can use the following polyfills.
https://www.npmjs.com/package/resize-observer-polyfill

jacintofleta commented

Hi @junkboy0315 thank you so much. I downgrade to 2.1.1 as some users are using old browsers.

Thank you so much for this amazing package.

  • 🎉1