[core] Fix image loading bug on Safari

vercel/next.js#22902
mui · Sep 14, 2023 · b59570b · b59570b
1 parent 427aa20
commit b59570b
Show file tree

Hide file tree

Showing 36 changed files with 38 additions and 38 deletions.
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -13,8 +13,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -12,8 +12,8 @@ export default function UnstyledSelectRichOptions() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
             alt={`Flag of ${c.label}`}
           />
           {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx.preview
@@ -4,8 +4,8 @@
       <img
         loading="lazy"
         width="20"
-        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
+        src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
         alt={`Flag of ${c.label}`}
       />
       {c.label} ({c.code}) +{c.phone}

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -42,8 +42,8 @@ export default function CarouselRatio() {
         <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
-              src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
               alt={item.title}
             />
           </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview
@@ -2,8 +2,8 @@
   <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
     <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
       <img
-        src={`${item.src}?h=120&fit=crop&auto=format`}
         srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.src}?h=120&fit=crop&auto=format`}
         alt={item.title}
       />
     </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -36,8 +36,8 @@ export default function ListStackRatio() {
               <ListItemButton sx={{ gap: 2 }}>
                 <AspectRatio sx={{ flexBasis: 120 }}>
                   <img
-                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
                     alt={item.title}
                   />
                 </AspectRatio>

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -25,8 +25,8 @@ export default function CountrySelect() {
             <img
               loading="lazy"
               width="20"
-              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
               alt=""
             />
           </ListItemDecorator>

diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -48,8 +48,8 @@ export default function EmailList() {
               <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
                 <Avatar
                   alt=""
-                  src={item.avatar}
                   srcSet={item.avatar2x}
+                  src={item.avatar}
                   sx={{ borderRadius: 'sm' }}
                 />
               </ListItemDecorator>

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
@@ -27,8 +27,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>

diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/CountrySelector.tsx
@@ -25,8 +25,8 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
                 <img
                   loading="lazy"
                   width="20"
-                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                   alt=""
                 />
               </AspectRatio>

diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}

diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -16,8 +16,8 @@ export default function CountrySelect() {
           <img
             loading="lazy"
             width="20"
-            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
             alt=""
           />
           {option.label} ({option.code}) +{option.phone}

diff --git a/docs/data/material/components/image-list/MasonryImageList.js b/docs/data/material/components/image-list/MasonryImageList.js
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx b/docs/data/material/components/image-list/MasonryImageList.tsx
@@ -10,8 +10,8 @@ export default function MasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx.preview b/docs/data/material/components/image-list/MasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/StandardImageList.js b/docs/data/material/components/image-list/StandardImageList.js
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/StandardImageList.tsx b/docs/data/material/components/image-list/StandardImageList.tsx
@@ -8,8 +8,8 @@ export default function StandardImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/StandardImageList.tsx.preview b/docs/data/material/components/image-list/StandardImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.js b/docs/data/material/components/image-list/TitlebarBelowImageList.js
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowImageList.tsx
@@ -9,8 +9,8 @@ export default function TitlebarBelowImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx
@@ -11,8 +11,8 @@ export default function TitlebarBelowMasonryImageList() {
         {itemData.map((item) => (
           <ImageListItem key={item.img}>
             <img
-              src={`${item.img}?w=248&fit=crop&auto=format`}
               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=248&fit=crop&auto=format`}
               alt={item.title}
               loading="lazy"
             />

diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=248&fit=crop&auto=format`}
         srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=248&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/image-list/TitlebarImageList.js b/docs/data/material/components/image-list/TitlebarImageList.js
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/TitlebarImageList.tsx b/docs/data/material/components/image-list/TitlebarImageList.tsx
@@ -15,8 +15,8 @@ export default function TitlebarImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=248&fit=crop&auto=format`}
             srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=248&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.js b/docs/data/material/components/image-list/WovenImageList.js
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.tsx b/docs/data/material/components/image-list/WovenImageList.tsx
@@ -8,8 +8,8 @@ export default function WovenImageList() {
       {itemData.map((item) => (
         <ImageListItem key={item.img}>
           <img
-            src={`${item.img}?w=161&fit=crop&auto=format`}
             srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+            src={`${item.img}?w=161&fit=crop&auto=format`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/data/material/components/image-list/WovenImageList.tsx.preview b/docs/data/material/components/image-list/WovenImageList.tsx.preview
@@ -2,8 +2,8 @@
   {itemData.map((item) => (
     <ImageListItem key={item.img}>
       <img
-        src={`${item.img}?w=161&fit=crop&auto=format`}
         srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.img}?w=161&fit=crop&auto=format`}
         alt={item.title}
         loading="lazy"
       />

diff --git a/docs/data/material/components/masonry/ImageMasonry.js b/docs/data/material/components/masonry/ImageMasonry.js
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{

diff --git a/docs/data/material/components/masonry/ImageMasonry.tsx b/docs/data/material/components/masonry/ImageMasonry.tsx
@@ -22,8 +22,8 @@ export default function ImageMasonry() {
           <div key={index}>
             <Label>{index + 1}</Label>
             <img
-              src={`${item.img}?w=162&auto=format`}
               srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
+              src={`${item.img}?w=162&auto=format`}
               alt={item.title}
               loading="lazy"
               style={{

diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -126,8 +126,8 @@ function PostPreview(props: BlogPost) {
             <Avatar
               key={author}
               alt=""
-              src={`${AUTHORS[author].avatar}?s=${28}`}
               srcSet={`${AUTHORS[author].avatar}?s=${28 * 2} 2x`}
+              src={`${AUTHORS[author].avatar}?s=${28}`}
             />
           ))}
         </AvatarGroup>
@@ -264,13 +264,13 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       <main id="main-content">
         <Box
           sx={(theme) => ({
-            background: `linear-gradient(180deg, #FFF 50%, 
+            background: `linear-gradient(180deg, #FFF 50%,
           ${(theme.vars || theme).palette.primary[50]} 100%)
         `,
             ...theme.applyDarkStyles({
               background: `linear-gradient(180deg, ${
                 (theme.vars || theme).palette.primaryDark[800]
-              } 50%, 
+              } 50%,
           ${alpha(theme.palette.primary[900], 0.2)} 100%)
           `,
             }),

diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
@@ -26,8 +26,8 @@ function Feedback({
       </Typography>
       <Box sx={{ display: 'flex' }}>
         <Avatar
-          src={profile.avatarSrc}
           srcSet={profile.avatarSrcSet}
+          src={profile.avatarSrc}
           alt={`Picture of ${profile.name}`}
           imgProps={{ loading: 'lazy' }}
           sx={{

diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
@@ -164,8 +164,8 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
     children = (
       <AvatarImg
         alt={alt}
-        src={src}
         srcSet={srcSet}
+        src={src}
         sizes={sizes}
         ownerState={ownerState}
         className={classes.img}