[v0.14] IE11/Edge compatbility

[rstoenescu]

Hi All,

Just released Quasar with compatibility fixes that can be imported if you need support for IE/Edge.

First, npm update quasar-framework, then add this to your main.js AFTER the Quasar theme import:

// Uncomment the following lines if you need IE11/Edge support
// require(`quasar/dist/quasar.ie`)
// require(`quasar/dist/quasar.ie.${__THEME}.css`)

As it says above, uncomment the two lines if you need support for IE/Edge.
Like always, please submit ANY issues you find to github and let’s get v0.14 ready for its final release.

You need to thank Dan Popescu (member of Quasar team) for his continuing efforts on this one.

EDIT: Also npm install es6-promise package.

-Razvan

[keyb2004]

@rstoenescu

After doing this, the flat button is still wrong on IE11/Edge.

[pdanpdan]

This post is deleted!

[pdanpdan]

@keyb2004
Can you please give us more details? The template would be nice. Also IE version and OS. Confirm these steps:

1. did you do a npm update?
2. did you uncomment (or add) require(quasar/dist/quasar.ie.${__THEME}.css) in main.js?
3. can you check if all buttons in http://beta.quasar-framework.org/quasar-play/android/index.html#/showcase/forms/button show correctly in IE?

[keyb2004]

@pdanpdan

IE:Microsoft Edge 38.14393.0.0
Microsoft EdgeHTML 14.14393

OS: Windows 10 (1607) professional (review 14393.693) 64bit

[s.molinari]

I can also reproduce the issues on the beta site.

Same OS and Browser versions as above.

Not sure how much this helps, but if I turn off display: inline-flex, things seem to go back to the way they should.

Scott

[pdanpdan]

@s.molinari
Yes, that’s correct. That’s what the compatibility layer for IE does. The only problem is that it only detects IE, not Edge. I have to find a hack that’s common for IE and Edge.
I’ll try to use this tomorrow: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

[keyb2004]

@pdanpdan Any progress?

[pdanpdan]

@keyb2004
Hi. It’s done and tested on IE and Edge (this time also on Edge ).
https://github.com/quasarframework/quasar/pull/685
It’s merged in dev, but it’s not yet in quasar-edge.
If you want you can get a slightly modified build from https://github.com/pdanpdan/quasar

[rstoenescu]

Deployed to edge. So any fixes are there.

[keyb2004]

Thank you for your help!

[rv]

Hi, I am experience similar issue with IE 11 compatibility and getting blank pages.
IE: 11.0.46
Quasar: 0.14.5
Vue: 2.4.4

• Installed ‘es6promises’
• Added recommended IE support lines in main.js

// Uncomment the following lines if you need IE11/Edge support
require(`quasar/dist/quasar.ie`)
require(`quasar/dist/quasar.ie.${__THEME}.css`)

// Polyfills for IE support
import es6Promise from 'es6-promise'
es6Promise.polyfill()
import 'babel-polyfill'

I am getting following error in IE console and blank pages:

SCRIPT1003: Expected ':'
File: app.js, Line: 2614, Column: 1

Any help is appreciated!

[rv]

Found the problem. Definitely not an issue with quasar; it was some third party module which was causing issues with IE. To be specific it was vue2-filters (https://github.com/freearhey/vue2-filters).
Here are two active issues which I was also facing - #33 & #32.

I removed this module and my quasar app worked fine on IE. I think will be adding custom filters or will user Quasar’s css helper classes which I was not aware of before.

Thanks!

[rstoenescu]

@rv said in [v0.14] IE11/Edge compatbility:

// Polyfills for IE support
import es6Promise from 'es6-promise'
es6Promise.polyfill()
import 'babel-polyfill'

Essentially this is what require('quasar/dist/quasar.ie') does. Why do you need that added?

[rv]

@rstoenescu said in [v0.14] IE11/Edge compatbility:

t/quasar.ie

Thanks. I didn’t realize and removed es6-promise specific lines. But I would need import 'babel-polyfills' to solve other IE compatibility issue like -

"TypeError: Object doesn't support property or method 'assign'"

[rstoenescu]

Are there any other errors that you get? I will add Object.assign to the IE polyfills list.

[rv]

@rstoenescu Nop - that was it!

And I can only post once every 120 seconds…

[rstoenescu]

@rv thanks. changed to 15 seconds now.

[walfin]

Hi, looking for some help here. I read on the old docs that I need to uncomment 2 lines in main.js to enable IE11/Edge support. However, I couldn’t find any main.js. How do I enable Edge support? Currently, I am facing a blank screen in Edge with this error, “SCRIPT1028: SCRIPT1028: Expected identifier, string or number”.

[s.molinari]

@walfin - Are you using v0.14?

Scott