Skip to main content

Browser support

GitHub repository


The web component relies on a few browser features, the most recently implemented being:

If any of these features are not supported by the browser, the web component will disable itself and fall back to behaving like a standard <img> tag.

This behavior can be simulated by setting the data-disabled="all" HTML attribute. See the attribute reference for more information.

ResizeObserver polyfill

In order to increase browser support, you can ship your web application with a ResizeObserver polyfill. If your project is using a bundler (e.g. Webpack or Rollup), add the polyfill to your project with:

npm install @juggle/resize-observer

and set it up right where you import the web component:

import '@frameright/image-display-control-web-component/image-display-control.js';

// This is a ponyfill, i.e. a polyfill that doesn't touch the global window
// object by default, see
import { ResizeObserver as ResizeObserverPonyfill } from '@juggle/resize-observer';
window.ResizeObserver = window.ResizeObserver || ResizeObserverPonyfill;

Missing CSS contain

Even if the browser does not support the contain CSS property, it is possible to make use of the web component by telling it what to do instead when this browser feature isn't available. This can be done by setting the data-css-contain-fallback= HTML attribute. See CSS containment and the attribute reference for more information.