Has anyone experienced display issues in Internet Explorer 11 with Webflow websites and found any solutions or suggestions to address this problem across multiple sites?
TL;DR
- Use conditional CSS and simplified layouts (e.g., floats, inline-block) to work around IE11's lack of support for modern Webflow features.
- Add JavaScript polyfills (e.g., via polyfill.io), test site rendering directly in IE11, and include warnings or redirects for outdated users.
Webflow sites often experience display issues in Internet Explorer 11 (IE11) due to IE11’s lack of support for modern CSS/JS features used by Webflow. Since IE11 is outdated, Webflow stopped officially supporting it in 2021. However, there are a few workarounds to improve compatibility.
1. Understand Webflow’s IE11 Limitations
- Webflow no longer actively supports IE11, so certain layout mechanisms (like Flexbox, Grid, and modern JS functions) may not work or render incorrectly.
- Custom code elements and newer CSS properties (e.g.,
object-fit,position: sticky,aspect-ratio) may not behave as expected.
2. Use Fallback Styles for Problem Areas
- Use conditional CSS inside a
<style>tag with an IE-only comment block. Example:<!--[if IE]> ... <![endif]-->. - Simplify layout for these users by targeting older CSS positioning like
float,inline-block, or non-Flexbox options. - Avoid CSS Grid; instead, use simpler layout structures for compatibility where necessary.
3. Polyfills for JavaScript Compatibility
- IE11 lacks support for many JS features (e.g., ES6+ syntax). Use a polyfill service like polyfill.io and include it in your project’s Before </body> tag.
- Enable core features like
Promise,fetch, andArray.prototype.includes.
4. Identify Failing Layouts Using Dev Tools
- Open the site in IE11 and use its Developer Tools (F12) to inspect what’s failing (e.g., display, script errors).
- Using emulators is unreliable—test on a real IE11 environment or Windows VM if possible.
5. Inform or Redirect Legacy Users
- Add a browser compatibility warning using custom code that targets IE11 and suggests alternative browsers.
- Example: check
navigator.userAgentfor “MSIE” or “Trident” and display a modal or redirect notice.
Summary
Webflow sites often break in IE11 due to unsupported CSS/JS features, and while Webflow doesn’t support it, you can apply conditional styles, JavaScript polyfills, and fallback layouts for partial compatibility. Long-term, clearly communicating that your site supports modern browsers is the best practice.
