Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.

Inconsistent image heights in Safari vs. Chrome/Firefox often result from missing responsive image variants or inconsistent aspect ratios, especially when Webflow fails to generate the responsive srcset markup.

​

1. Check for Missing Responsive Images

​

• Webflow’s responsive image system relies on creating image variants at different sizes.
• If the CMD + SHIFT + I shortcut didn't trigger generation properly for two images, Webflow may only be serving the original 800×600 image without srcset.
• Inspect the images using the Safari Dev Tools and compare their markup with working images. Look for missing <img srcset> or <img sizes> attributes.

​

2. Re-upload the Image Files

​

• Sometimes, uploaded images don’t register fully for responsive processing, especially if:
• They were quickly uploaded in succession,
• They were copy-pasted between CMS collections,
• Or image variants failed to generate due to file corruption.
• Delete and re-upload the images directly to the CMS item to ensure Webflow reprocesses them.
• After re-uploading, publish the site again to generate fresh image variants.

​

3. Review Aspect Ratio Dependencies

​

• Safari renders images strictly based on their intrinsic size if no aspect ratio or height:auto is enforced along with width:100%.
• If a <img> lacks a defined height or aspect ratio, Safari might collapse or over-expand its height relative to the container.
• Ensure the image’s container uses object-fit: cover/contain or explicitly defines aspect ratio using modern CSS or Webflow layout settings.

​

4. Test by Replacing the Images

​

• As a sanity check, swap one of the working images into the broken image’s CMS item.
• If the issue persists on that CMS slot, the problem may lie in how the collection item is structured, such as:
• A differing div structure
• Conditional visibility
• Missing layout settings at the collection level

​

5. Rebuild the Image Block (If Needed)

​

• Sometimes the DOM structure can carry over hidden layout issues.
• Delete the image element from the collection list template.
• Re-add it inside the same parent with the same CMS binding. Test again after publishing.

​

Summary

​

The inconsistent image height in Safari is likely caused by missing responsive srcset markup or layout differences in how images are rendered without it. Fix by re-uploading the images in the CMS, ensuring Webflow generates responsive variants, and verifying image container layout settings to control aspect ratio.