square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

perf(image): update css for perf on safari #575

Closed kevinlee11 closed 10 months ago

kevinlee11 commented 10 months ago

Describe the problem this PR addresses

Noticed on our OO sites in Safari removing the images vastly improved the scroll experience. From there it was just removing attributes and CSS until I narrowed it down to the height: 100% seemingly causing the issue. Will see if the deployed version provides the same perf gain.

Describe the changes in this PR

Use inherit instead of 100% and remove the parent span as that causes perf issues. img needs to be a direct child of the div.

github-actions[bot] commented 10 months ago

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

rgershon commented 10 months ago

Have you tested in other browsers to make sure these changes don't cause any issues?

kevinlee11 commented 10 months ago

Have you tested in other browsers to make sure these changes don't cause any issues?

Yup, Chrome, Safari, and FF.

github-actions[bot] commented 10 months ago

:tada: This PR is included in version 19.6.7 :tada:

The release is available on:

Your semantic-release bot :package::rocket: