Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

W-17609247 - Fix Safari bug where the same image loads several times #2223

Merged
merged 3 commits into from
Jan 29, 2025
Merged

W-17609247 - Fix Safari bug where the same image loads several times #2223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c450391
Move src to be below srcSet
vcua-mobify Jan 28, 2025
0b86e20
Add comments and changelog
vcua-mobify Jan 28, 2025
ce6dd60
Merge branch 'develop' into fix-safari-image-loads-multiple
vcua-mobify Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- Allow store to be selectable in StoreLocator [#2187](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2187)
- [BUG] Fixed "getCheckboxProps is not a function" when rendering checkout page in generated app.[#2140](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2140)
- Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
- [BUG] Fix images being fetced multiple times on Safari [#2223](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223)

### Accessibility Improvements
- [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)
Expand Down
7 changes: 5 additions & 2 deletions packages/template-retail-react-app/app/utils/responsive-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,13 @@ export const getResponsiveImageAttributes = ({src, widths, breakpoints = default
themeBreakpoints = breakpoints
breakpointLabels = getBreakpointLabels(themeBreakpoints)

// Order of these attributes matter! If src is not last, Safari will refetch images
// multiple times (once when it processes src and again when it processes sizes / srcSet)
// See https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223
return {
src: getSrcWithoutOptionalParams(src),
sizes: mapWidthsToSizes(widths),
srcSet: mapWidthsToSrcSet(widths, src)
srcSet: mapWidthsToSrcSet(widths, src),
src: getSrcWithoutOptionalParams(src)
Copy link
Contributor

@vmarta vmarta Jan 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a code comment to explain why and to make sure that src will be kept last.

}
}

Expand Down
Loading