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.

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

Fix tall images on PDPs and PLPs #1559

Merged
merged 1 commit into from Aug 14, 2019

Conversation

bookernath
Copy link
Contributor

@bookernath bookernath commented Aug 13, 2019

What?

Cornerstone 4.0 introduced a bug in which images which are particularly tall (portrait) are stretched on PDPs and PLPs:

image

This fixes that using object-fit: contain.

Tickets / Documentation

Screenshots (if appropriate)

image
image

@bigbot
Copy link

bigbot commented Aug 13, 2019

Autotagging @bigcommerce/storefront-team @davidchin

mattolson
mattolson previously approved these changes Aug 13, 2019
@bookernath
Copy link
Contributor Author

bookernath commented Aug 13, 2019

Looks like this doesn't work on IE11. Need to look for a better solution.

https://caniuse.com/#feat=object-fit

@bookernath
Copy link
Contributor Author

@mattolson ♻️

@bookernath
Copy link
Contributor Author

I've added this polyfill for IE11: https://github.com/fregante/object-fit-images

We can remove it when we no longer need to support IE11

Copy link
Contributor

@mattolson mattolson left a comment

Choose a reason for hiding this comment

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

How much does this add to the page weight? Is it possible to optimize this so the polyfill is only downloaded and loaded for IE11 users?

@bookernath
Copy link
Contributor Author

@bookernath
Copy link
Contributor Author

@mattolson I've added a conditional to make it only execute for IE11. Let me know if you think we should further optimize.

@mattolson mattolson merged commit 38d238e into bigcommerce:master Aug 14, 2019
bookernath added a commit that referenced this pull request Aug 15, 2019
mattolson added a commit that referenced this pull request Aug 15, 2019
@bookernath bookernath deleted the fix-tall-images branch August 16, 2019 15:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants