Skip to content

responsiveImageUpdate

Mike Byrne edited this page Jan 25, 2022 · 2 revisions

description

Safari doesn't reassess srcset with resize, see: https://bugs.webkit.org/show_bug.cgi?id=149899

On resize, it might pick a lower resolution image and never change unless you refresh the browser.

The fix

On resized (debounced resize) and page:updated, adding an empty string to the sizes attribute will force the engine to reassess.

See: https://github.com/ausi/respimagelint/issues/31#issuecomment-420441005

requires

  • nothing

parameters

  • none

returns

  • nothing

example usage:

import { responsiveImageUpdate } from '@area17/a17-helpers';

document.addEventListener("DOMContentLoaded", () => {
  responsiveImageUpdate();
});