Skip to content

Instantly share code, notes, and snippets.

@OliverJAsh
Created July 14, 2024 17:37
Show Gist options
  • Save OliverJAsh/1fbbdd99a471123cf5edd9794a690ec4 to your computer and use it in GitHub Desktop.
Save OliverJAsh/1fbbdd99a471123cf5edd9794a690ec4 to your computer and use it in GitHub Desktop.
React workaround for Safari bugs
import * as React from 'react';
export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
({ loading, sizes, srcSet, src, ...props }, ref) => (
<img
ref={ref}
// This must be set before `srcSet` + `src` to workaround a Safari bug:
// https://bugs.webkit.org/show_bug.cgi?id=276586#c1
loading={loading}
// This must be set before `srcSet` to workaround a Safari bug:
// https://bugs.webkit.org/show_bug.cgi?id=276586
sizes={sizes}
// This must be set before `src` to workaround a Safari bug:
// https://bugs.webkit.org/show_bug.cgi?id=190031
srcSet={srcSet}
src={src}
{...props}
/>
),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment