Vuetify: Adding IE11 Support Guidelines to Docs
Steps to reproduce
Test raised button component in IE11 with long text content.
Versions
Vue: 2.2.6
Vuetify: 0.11.1
OS: Windows 10
Browser: IE11
What is expected ?
The buttons must fit the content.
What is actually happening ?
The button has a fixed size which might be defined by the min-width.
Solution
As far as my debugging skills reach i was able to discover that a flex-basis: auto; on the 'btn__content' class fixes the issue in my environment.
thupi
All 21 comments
IE10 is not supported and IE11 is hanging on by a thread. When I made this framework I didn't have intentions of supporting IE at all. I understand that this may be a hindrance for developers who cover those browsers, but there are other material frameworks that will.
I'll leave this open for discussion.
johnleider
on 29 Apr 2017
Okay, I did not know that :-) If that is the case, it would be very nice if that would be described in the docs.
I have screened the community for material component libraries and have tested most of them such as Keen-UI and vue-material. The one i selected at the end was vuetify.
However, most of the components works relativly well in IE11 and only need a bit tweaking in order to make it play well with IE11.
I hope you will consider support IE11 as a large amount of our users use IE11.
If you deside not to support IE11 i could get away with overwriting some of the classes that needs small tweaks right :-) ?
thupi
on 30 Apr 2017
If anyone would like to help test and work on IE it would be most appreciated, if not, I'll look at this when I can.
johnleider
on 1 May 2017
Using Vuetify, I am building a small webapp for internal use in my company. Unfortunately all employees are forced to use Internet Explorer (v.11). This is the case in many companies. That is why I think it would be worth the effort to support IE11. Actually, in the current state of Vuetify and with a few polyfills (_assign_, _removeChild_, etc.), it works already quite well. I only ran into two issues:
- The issue brought up here, which can be easily fixed by specifying a minimum width.
- And the button toggle component, which has a serious display bug.
For all the other components, I didn’t encounter any major problems, even for the date picker one.
Like thupi advocates, it would be good idea to mention the supported browsers on Vuetify docs website and in the Github readme, with a warning about IE11.
However, I know that spending time supporting a crappy browser like IE11 is no fun and would be better spent improving other areas of Vuetify. Therefore, I suggest adding a page under the Guides section of the documentation that show the needed polyfills and CSS fixes to achieve basic support.
Lastly, just for information: because of missing polyfills, the docs website doesn’t work at all on IE.
mornir
on 2 May 2017
Good points. It shall be done!
johnleider
on 2 May 2017
IE11 is the most used IE version and unfortunately it will be like this for a long time.
From what I have seen IE11 should be an easy catch, it "mostly works" in all frameworks, even in Vuetify.
If suggesting https://polyfill.io/v2/docs/, and some minor CSS fixes / additions makes Vuetify work without any probs I would vote going for it.
All our enterprise customers are using IE11 right now.
PS: https://www.netmarketshare.com/ reports 13,62% market share for IE11 right now.
amesas
on 4 May 2017
@thupi I suggest you rename this issue to something like "Adding IE11 Support Guidelines to Docs"
mornir
on 4 May 2017
@mornir You are right, that might make more sense :-)
thupi
on 4 May 2017
Looking into this right now!
johnleider
on 18 May 2017
I am very much looking forward to the day that IE support is no longer needed.
In the meantime, it looks like IE 11 chokes on datatables (as they are presented in the documentation). The error given is an "unexpected start tag" (error HTML1503) on every
The fix for this was easy, but took me a while to figure out. It would be helpful to have it documented. Instead of entering a
Vue.component('cell',{
template: '<td><slot></slot></td>',
});
Now, we can use @jijoel Can you produce a codepen demonstrating this issue, or does it happen on the docs as well? Data tables in the docs work fine in my IE11 browser. @johnleider After jijoel's issue has been dealt with, I suggest closing this issue for the following reasons: A big thanks for supporting IE11. I was thrilled to see my app works flawlessly on this browser after I upgraded to v.0.12.0👍 @johnleider It happens when I copy Example #1 directly from the docs. This codepen shows the result: This codepen shows what happens when I use a made-up Please note that both of the examples rely on polyfill.io, and that I did not include another polyfill that is required for the find function to work. The latter is at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find?v=control. Regarding closing this issue, I do agree that it's better to open a new issue than to reply to this thread. Maybe we could lock the conversation, but leave it open? Or maybe set up a separate "IE Testing" thread with comments disabled? If there hadn't been a big "Help Wanted" label on this issue, I suspect I would have just assumed it was my own thing, and not written about the workaround that I found for it. The issue has to do with codepen and not Vuetify, data tables look great on IE11. I just realized why the datatables in the docs work fine. They're pre-compiled by Vue, so Internet Explorer just sees a complete dom. In an html file, though, where the browser can see tags before the dom is fully built, IE can't handle it. There aren't any changes needed to vuetify, but maybe a line or two about IE support in the docs? (or, probably, people running in to this can just look up this thread. :-) ) You think you could pr the docs and add That? On Jun 3, 2017 5:43 PM, "Joel" notifications@github.com wrote: I just realized why the datatables in the docs work fine. They're There aren't any changes needed to vuetify, but maybe a line or two about — I agree that we all can't wait for IE to die but folks, thats still aways off in the corporate world. The fact this isn't pointed out on the homepage is very problematic. I may have just wasted weeks of work. That doesn't make any sense @dbebber , that caveat has nothing to do with Vuetify. In fact, Vue's short-comings with IE11 are documented. You are right, my apologies. Spoke without thoroughly reading everything. On Thu, Dec 7, 2017 at 9:03 PM, John Leider notifications@github.com That doesn't make any sense @dbebber https://github.com/dbebber , that — With correct settings, vuetify is correctly functionnal with IE10+ : In my case, I use the "A la demande" config with POI.js. I add this settings in the poi.config.js in the Now it works fine on IE11. But in IE10 I have only one bug : modals and dropdown menu works fine only first time I realize this is a really old closed ticket, but I am in a role where we must support IE10 and I was curious if @throrin19 ever resolved that last issue they were seeing for IE10?, and the datatable works normally (including sorting, filtering, etc).
pre-compiled by Vue, so Internet Explorer just sees a complete dom. In an
html file, though, where the browser can see tags before the dom is fully
built, IE can't handle it.
IE support in the docs? (or, probably, people running in to this can just
look up this thread. :-) )
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/463#issuecomment-306003261,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgiNJzeDu5ig1dSauLTcdug-l8kZhks5sAdOJgaJpZM4NMGW2
.
wrote:
caveat has nothing to do with Vuetify.
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/463#issuecomment-350150720,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAxwD3_XKIOYXZWDd-18452pYH-L-n3bks5s-JjYgaJpZM4NMGW2
.
extendWebpack :config.module.rule('vuetify')
.test(/vuetify.es5.*?js$/)
.use('babel-loader')
.loader('babel-loader');
Related issues
Most helpful comment
With correct settings, vuetify is correctly functionnal with IE10+ :
In my case, I use the "A la demande" config with POI.js. I add this settings in the poi.config.js in the
extendWebpack:Now it works fine on IE11. But in IE10 I have only one bug : modals and dropdown menu works fine only first time