[v0.14] IE11/Edge compatbility

[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

[walfin]

No, 1.6.1.