search

SalesforceCommerceCloud / pwa-kit

React-based JavaScript frontend framework to create a progressive web app (PWA) storefront for Salesforce B2C Commerce.
https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-kit-overview.html
BSD 3-Clause "New" or "Revised" License
284 stars 140 forks source link

[BUG] responsive image: mapWidthsToSrcSet generating invalid DIS urls #1343

Open ecRobertEngel opened 1 year ago

ecRobertEngel commented 1 year ago

The DynamicImage component can produce DIS links that are not working due to DIS limitations. This is caused by mapWidthsToSrcSet which calculates the widths. DIS has a size limitation of 3000px this can easily be exceeded by devices with high pixel density or ultra wide screen devices if the passed width is 100vw. A simple Math.min resolved the issue for us.

vmarta commented 1 year ago

Hi @ecRobertEngel , what are some examples of DIS links that did not work for you? Thanks.

ecRobertEngel commented 1 year ago

I have manipulate a sample product image from the Demo Store.

This URL is not working: https://[edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6a5ac15c/images/large/PG.10226236.JJGN9A0.PZ.jpg?sw=3072&q=60](https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6a5ac15c/images/large/PG.10226236.JJGN9A0.PZ.jpg?sw=3072&q=60)

This one is: https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw6a5ac15c/images/large/PG.10226236.JJGN9A0.PZ.jpg?sw=3000&q=60

We had this issue happen with the dynamic image component and the parameter 100vw on MAC devices with retina displays.

Edit: to be completely safe it might even make sense to add a Min limitation of 10px. But that is I think less likely to happen.

git2gus[bot] commented 1 year ago

This issue has been linked to a new work item: W-13726290