What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Product image frame height issue

Solved

Having issues with Ella theme product image frame height?

k30lau
Excursionist
14 2 3

I'm using Ella theme and everything was working fine.  Today, the product image on the product page are distorted.  It looks like both width and height auto is not working.  I tried using Chrome inspect to test the code.  If I change both width & height to 523px, then it works fine.  1) has there been a theme update that distorted the code? 2) How can I fix this?  Do I just add custom CSS to set to 523px?  I'm concern that will be a problem with the user has a different screen sizes.

 

Screenshot 2024-01-26 095940.png

Accepted Solutions (2)
k30lau
Excursionist
14 2 3

This is an accepted solution.

Ella Theme also identified the issue and now provided a fix on their website.  There's alot of changes to make.

Troubleshooting Guide: Image Display on the Ella Theme in the latest C (halothemes.net)

 

View solution in original post

k30lau
Excursionist
14 2 3

This is an accepted solution.

@RobTORRO I'll take my words back.  I reported the bug to Google.  They have identified the issue and also applied a fix on their side.  The rootcause is AutoSizeLazyLoadImages.  Here is the full update from Google and official details.

 

a5856993c61543d4acbee5f848f1750607e87ba0 - chromium/src - Git at Google (googlesource.com)

 

1522175 - [User Feedback - Stable] Reports that the CSS object-fit property is rendering unexpectedl...

 

View solution in original post

Replies 15 (15)

k30lau
Excursionist
14 2 3

I even tried roll back to previous theme version and it doesn't work. 

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

Hi @k30lau Could you share your page URL to check?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

It works well on my side. Could you try to clear your browser cache and check again?

Screenshot 2024-01-26 at 09.39.27.pngScreenshot 2024-01-26 at 09.39.40.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

k30lau
Excursionist
14 2 3

Thanks Dan.  May I ask which browser you are using? 

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

I have checked on Chrome, Safari and Firefox 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

k30lau
Excursionist
14 2 3

Thanks Dan.  I just tried it on Bing, Opera, Safari, Firefox and they all worked.  I still can't get Chrome to work on both the laptop & mobile.  I cleared all the cache and even tried in incognito mode.  Looks like a Chrome exclusive problem.  Can you please confirm it's working for you on Chrome?  Because if it works for you in Chrome, then it will be my problem.

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

Yes, it is working well on my Chrome browser. I guess maybe one of your Chrome extensions may cause that issue, you can try to disable them and check again or use Incognito chrome browser and check.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

k30lau
Excursionist
14 2 3

Thanks Dan. I actually tried it on 8 different devices with different profiles. None of the Chrome browsers worked.  Maybe one of the latest Chrome updates have broken it.  Do you have auto-update turned off on your Chrome?

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

Hi @k30lau 

I'm using Chrom on my Mac Mini and it is Version 120.0.6099.234

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

k30lau
Excursionist
14 2 3

Thanks Dan.  I just read Google released the Chrome update yesterday.

 

I'm using desktop version 121.0.6167.86 

Mobile version 121.0.6167.101

 

I reported the bug to Google.

k30lau
Excursionist
14 2 3

This is an accepted solution.

Ella Theme also identified the issue and now provided a fix on their website.  There's alot of changes to make.

Troubleshooting Guide: Image Display on the Ella Theme in the latest C (halothemes.net)

 

RobTORRO
Shopify Partner
2 0 0

Thank you for sharing the link. Our custom theme is affected by the same issue and forcing it to use lazyloading seems to fix it. Is there any further information on "what" Google changed in the latest version of the browser?

k30lau
Excursionist
14 2 3

@RobTORRO I checked the changelog but nothing specific. 

k30lau
Excursionist
14 2 3

This is an accepted solution.

@RobTORRO I'll take my words back.  I reported the bug to Google.  They have identified the issue and also applied a fix on their side.  The rootcause is AutoSizeLazyLoadImages.  Here is the full update from Google and official details.

 

a5856993c61543d4acbee5f848f1750607e87ba0 - chromium/src - Git at Google (googlesource.com)

 

1522175 - [User Feedback - Stable] Reports that the CSS object-fit property is rendering unexpectedl...