What could be causing the image in Webflow to not display properly in IE11?
TL;DR
- Use JPEG, PNG, or GIF instead of unsupported formats like WebP.
- Avoid modern CSS like object-fit and grid; use div backgrounds and older layouts instead.
- Ensure fallback
<img>tags are present in<picture>elements. - Disable animations or interactions not supported in IE11.
- Clear IE11 cache or use InPrivate mode to test cleanly.
Images not displaying properly in IE11 is typically caused by unsupported image formats, modern CSS features, or Webflow-specific limitations that Internet Explorer 11 doesn’t recognize.
1. Check Image Format Compatibility
- IE11 does not support WebP. If your image is in WebP format, it won’t render in IE11.
- Use JPEG, PNG, or GIF for full compatibility with Internet Explorer.
2. Ensure Correct Display Settings
- Check that the image is not set to
display: nonewhen viewed in IE11. Legacy browsers might misread some flex/grid alignment rules. - In Webflow, verify image container styles are compatible with older layout systems—avoid
display: gridunless fallback styles exist.
3. Verify CSS Properties and Vendor Prefixes
- Some modern CSS (like
object-fit, advancedfilter, ormix-blend-mode) may not render correctly or at all in IE11. - If you used
object-fit: cover, it will break in IE11. Instead, use background images on a div for compatibility.
4. Confirm Webflow Browser Support Limitations
- Webflow’s Designer and some animation features don't fully support IE11. Interactions or animations can conflict with basic rendering.
- Try disabling animations and checking if the image displays.
5. Fallback Content and Image Delivery
- If you are using the
<picture>element with<source type="image/webp">, IE11 will not fall back unless an<img>is also included as a final element. - Always include a fallback image inside
<img>, and ensure Webflow renders it properly.
6. Test in a Clean Environment
- Sometimes IE11 caches broken elements. Clear cache or test in InPrivate mode.
- Try using developer tools in IE11 to inspect if the image tag is even being rendered and if the
srcattribute is being respected.
Summary
To fix image display issues in IE11, use standard image formats (JPEG/PNG), avoid modern CSS properties, confirm interaction compatibility, and ensure fallback images are properly structured. IE11’s limited support requires simplifying styles and avoiding modern HTML/CSS features that aren't backward-compatible.