search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.96k stars 32.27k forks source link

[material-ui][Avatar] Source is loaded twice by Safari with `loading: "lazy"` set #40990

Closed marvinruder closed 6 months ago

marvinruder commented 9 months ago

Steps to reproduce

<Avatar
  alt="Lenna"
  src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png"
  imgProps={{ loading: 'lazy' }}
/>

Link to live example

Steps:

  1. Open page in Safari 17.3 on macOS 14.3
  2. Open Network tab in Web Inspector
  3. Find two requests for the test image URL (compared to just one when removing loading: "lazy" attribute.

Current behavior

The image is loaded twice.

Expected behavior

The image is loaded once and only when the browser needs it.

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: Linux 6.6 Alpine Linux Binaries: Node: 21.6.1 - /usr/local/bin/node npm: 10.2.4 - /usr/local/bin/npm pnpm: Not Found Browsers: Safari: 17.3 (19617.2.4.11.8) on macOS 14.3 (build 23D56) ```

Search keywords: lazy loading

siriwatknp commented 9 months ago

Can you confirm that this is just the behavior on Safari?

marvinruder commented 9 months ago

Can you confirm that this is just the behavior on Safari?

@siriwatknp Yes, I tested it on Chrome for macOS and it worked fine there.

marvinruder commented 6 months ago

This appears to be fixed in a more recent version of either Safari or Material UI. I can no longer reproduce it on Safari 17.4.1 and with Material UI 5.15.18.