coliff
Problems with beta3
Components requiring JS (navbar, dropdowns, carousels and etc.) don't work when I change "beta2" to "beta3" in
I'd love to find a polyfill fix for this, but for now, for a quick fix I suggest users load: [email protected]/dist/js/bootstrap.bundle.min.js just for IE11 users like so:
<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"><\/script><script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find,Number.parseFloat%2CNumber.parse"><\/script>');</script>
Working demo: https://coliff.github.io/bootstrap-ie11/tests/
Coliff, I've made a PR concerning to the missing "Int" in the end of the src line for polyfill.io. Also may be it will be better to replace commas with "%2C".
And I don't know why it's not working when I include BS beta2 in the <head> because on your test page it works fine. But it's OK when I included it in the end of the <body> according to the BS documentation like this:
<!-- Bootstrap Bundle with Popper -->
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
<script
nomodule>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"><\/script>');</script>
</body>
Thanks for that PR and the feedback!
Interesting info there about where to include the script. I think it would be better to include it in the head though as it should be faster and not require the page to repaint (once the polyfills have loaded).
I've looked into this some more... Bootstrap Beta 3 is using const alot (230 times :-) ) - which is incompatible with IE11. I think the answer is to use Babel to transpile the code to IE compatible. So I think I'll look at adding Babel to the build process and include a bootstrap.js within the project.
@coliff the babel link was super helpful. I swapped out the beta source for their production src (5.0.1). I also needed to include a polyfill for composedPath to prevent dropdown js errors.
(function (E, d, w) {
if (!E.composedPath) {
E.composedPath = function () {
if (this.path) {
return this.path;
}
var target = this.target;
this.path = [];
while (target.parentNode !== null) {
this.path.push(target);
target = target.parentNode;
}
this.path.push(d, w);
return this.path;
};
}
})(Event.prototype, document, window);
So far everything appears to be working as is at the moment. ( include offcanvas in ie11 )
I did have to add another function however for the moda/off canvas. The body model-open class no longer has css applied to it, but the css is added with JS inline.
In IE11 the overflow: hidden does't get removed, so I had to add a function for a general check in IE11
// ie 11 only
const isIE11Check = /Trident.*rv[ :]*11\./.test(navigator.userAgent);
if (isIE11Check) {
const myModalElsIE11 = document.querySelectorAll('.modal');
myModalElsIE11.forEach((currentModal) => {
// eslint-disable-next-line no-unused-vars
currentModal.addEventListener('hidden.bs.modal', (e) => {
document.querySelector('body').setAttribute('style', '');
});
});
}
@roryheaney thanks for the detailed reply with the solution you found - sounds great. I tried using Babel with latest production src (5.0.1) but it didn't work for me. Do you have an example webpage or could you share the exact Babel config/settings so I can take a look?
It could be a good idea to add Bootstrap, Babel and polyfills to the dev dependencies of the project and have a build JS script which bundles everything together in a neat bootstrap-ie11.js file for users.
@coliff here is the babel compiler updated link that I used: reference
The polyfill is at the top of the page, and you can see it's function then placed just before bootstrap itself. ( this doesn't include the function though for the IE 11 modal check though ( would need to be applied to Off-Canvas as well ) )
I'll get a basic webpage up and link that reference here as well.
was this ever fully solved? I cannot seem to get it working with the latest versions or the older 5.0.0 versions
was this ever fully solved? I cannot seem to get it working with the latest versions or the older 5.0.0 versions
What issue are you referring to? All components on the test page: https://coliff.github.io/bootstrap-ie11/tests/ work with the exception of Offcanvas. I don't intend to add any JavaScript to this project/repo.
@coliff I was unable to get any of the interactive components to work. Things like modals and drop downs. tried for several days but was unable to use anything other than the classes for style
@coliff I was unable to get any of the interactive components to work. Things like modals and drop downs. tried for several days but was unable to use anything other than the classes for style
Make sure you include this in the <head> and before the Bootstrap v5 JS.
<script nomodule crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes">
</script>
<script
nomodule>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
Double-check your code and use the test page I made as a reference. It's important the scripts are loaded in the correct order.
thanks for the response. I will give it a try again but yeah thats what i was doing i really am not sure what exactly i was doing wrong. thanks for the tip
@coliff So I was able to get it working. It appears that some of our internal files must have been interfering with your package. Not 100% sure which one was but it was definitely something done in our project that was causing the issue. Thank you again for the help it is much appreciated.