Skip to main content

Safari

Defined here is some best practice in Safari that we all try to follow to ensure high performance.

SVG blurs​

Blurred elements struggle in Safari, here are some options:

  • Set conditionals for blurred elements to instead be dark overlays in Safari
  • Update blurred SVG elements to use css for the blur effect
  • The Tailwind class 'will-change-[transform, opacity]' can improve blur performance

SVG gradients​

  • SVGs with gradients shouldn't be used - instead use jpegs or PNGs
  • For product shots with color gradient backgrounds split into 2 elements - the gradient background as a jpeg and the product shot as an SVG

SVG shadows​

Delete shadows from SVGs and handle via CSS and option toggles on components.

SVG review - unused elements/defs​

Check over SVGs to ensure there are no duplicated elements or unused defs.