Firefox, IE10 + 11 JS and Styling Emergency (Site link below screenshots)

[uxmike]

I’m having some big issues with our site which are browser compatibility issues. Work fine with Chrome, Safari and Opera.

I’m very confident with HTML and CSS, and comfortable with JS.
I’ve taught myself how to do some basics with Vue.JS and combined that with my SVG knowledge to design and build the static foundations of what I hope will feel as fluid when scrolling as this Webflow project.

It looks horrible on IE though, all over the place, with one issue using Firefox (same using Edge) which I can’t debug for the life of me. My boss uses Firefox and our demographic is heavily old or corporate, both of which use IE heavy still. So I’m looking for it to work as expected for Firefox, IE10 + 11 as mentioned. I’m happy just using the outdatedbrowser.com protocol for anything older.

The JS isn’t working on IE even though there are no console errors and if you take a look at the screenshots below, you’ll see the HTML (and CSS?) is all over the place. How do I resolve these issues within WF or through code trickery?

Babel? CSS Polyfill kinda thing? Rebuilding the landing page and accept losing some features? Any ideas welcome.

Thanks in advance guys!

---

Please see some comprehensive screenshots from different browsers/OS combos below:

Firefox (and Edge) issue:

Windows 7 - IE11 (BrowserStack):

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[uxmike]

So, I worked out that some CSS isn’t compatible and with @cyberdave’s help, I’m slowly fixing the CSS within the Webflow Designer (adding more margins, removing flex layouts, etc).

The problem with the JS still remains and I’m totally stumped at how to overcome it given that I’m self-taught. Dave informed me that WF uses Modernizr (Modernizr Documentation) after I’d been recommended to try Babel from a friend who’s not familiar with Webflow and there current Polyfill plugins.

As you can probably tell, I’m a little out of my depth and could just do with someone pointing me in the right direction. I’m using simple Vue.JS (2.0) and my code is easily viewable from my site’s read-only link in the custom body code section of the page ‘/home-copy’. - That’s the duplicate page I’m currently making all changes on.