Browser support

thednp edited this page Oct 24, 2017 · 3 revisions

The components are tested to work nearly perfect in all major browsers, including legacy browsers starting with IE8 (compatibility view OFF). Legacy browsers don't support CSS3 transitions and there is nothing we can/should do about that.

However, in order to make legacy browsers comply with today's HTML5 standards, make sure you include a polyfill that covers most essential JavaScript API.

The Native JavaScript for Bootstrap comes with a dedicated 4Kb polyfill called polyfill.js, designed for IE8-IE11. Most of these legacy browsers would require the polyfill.js in combination with HTML5 shims like so:

<script src="https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/polyfill.min.js"> </script>
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

Along with a set of corrections, the required polyfills are: classList, indexOf, Event (including addEventListener, CustomEvent and dispatchEvent) and have been packed with the above mentioned polyfill.js.

For broader projects, a viable solution could be the minifill.js, which is mostly same as the provided polyfill but covering a wider range of features.

Finally an all-round polyfill solution is the Financial Times service:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

As you can see the scripts rely on very few unsupported features, so starting with 0.9.8 versions, some polyfill dependencies have been removed for better usability and reach. Any of the above choice should do, but apparently legacy browsers perform better with the provided polyfill, and the reason why the automated service renders legacy browsers slow is still unknown.

Remember that the polyfill link(s) must be in your <head>, especially the HTML5 shims, so that the legacy browsers can render the content properly. As for the provided polyfill, you can leave it there for all the browsers (IE 8-11 need Event, Safari might need some corrections, etc); make sure you check the code from this example page here.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.