Toasts and Internet Explorer 11

Created by: ray73864

Having an interesting issue with IE11 and the new Toasts in 4.2.1. I am using the functionality to centre a toast on the screen (horizontally at least) as found in this page: https://getbootstrap.com/docs/4.2/components/toasts/#placement

With IE11, the toast that appears is just over 120px wide, where as in Chrome the toast is 348px wide.

OS: Windows 10 1809 & Windows Server 2012 R2 Browser: IE11 JSBin: https://jsbin.com/suyuguzidu/1/edit?html,js

When testing with JSBin, I found if you use the output pane, it shows correctly in IE11, but if you click the little arrow to pop it out into its own tab, it exhibits the problem.

I found if I set a 'style="width: 350px"' on the div with a class of 'toast' it shows correctly, and is an OK work around for now, but it's not ideal, mostly because if I was to change the scss to have a bigger max-width I would then have to manually change any html file with a toast on it.