Monaca Onsen UI Discord Chat Github Repo

Onsen UI stopped supporting for Internet Explorer 11?



  • Hi Onsen Community,

    Based on Onsen’s FAQ page, i needed to add the following Polyfill listed below for it to work on IE 11. Below, is the sample code featuring Onsen UI’s “ons-tabbar” with Polyfill. The tabs would not work properly in IE 11. I am not sure if the Polyfill was done correctly. Please advise me.

    • Polyfill for Set/Map/WeakMap
    • Polyfill for MutationObserver
    • Polyfill for Promise
    • Polyfill for CustomEvent
    • Polyfill for Element.prototype.classList
    • Polyfill for Element.prototype.remove
    <!DOCTYPE html>
    <html>
    <head>
    
    
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default|gated,Set|always,Map|always,WeakMap|always,MutationObserver|always,Promise|always,CustomEvent|always,Element.prototype.classList|always,Element.prototype.remove|always"></script>
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css"> 
    
    
    </head>
    <body>
    <ons-page>
      <ons-toolbar>
        <div class="center">Tab 1</div>
      </ons-toolbar>
    
      <ons-tabbar swipeable position="auto">
        <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
        </ons-tab>
        <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
        </ons-tab>
      </ons-tabbar>
    </ons-page>
    
    <template id="tab1.html">
      <ons-page id="Tab1">
        <p style="text-align: center;">
          This is the first page.
        </p>
      </ons-page>
    </template>
    
    <template id="tab2.html">
      <ons-page id="Tab2">
        <p style="text-align: center;">
          This is the second page.
        </p>
      </ons-page>
    </template>
    <script src="https://unpkg.com/onsenui@2.10.4/js/onsenui.js"></script>
    </body>
    </html>
    

    Regards,
    Yuan Fa


  • administrators

    Onsen UI doesn’t officially support IE so the team doesn’t test releases on IE. This means we basically have no idea what does and doesn’t work in IE.

    Also, the polyfill information in the FAQ you linked to hasn’t been updated in over a year, and there have been significant changes to Onsen UI since then, so it is probably outdated.

    Sorry I can’t be of more help to you. I don’t know of anyone that’s currently using Onsen UI with IE - maybe you could try searching for IE users on the forum or GitHub issues.



  • Thanks for the info.

    Regards,
    Yuan Fa