search

coliff / bootstrap-ie11

Internet Explorer 11 compatibility solution for Bootstrap 5
https://coliff.github.io/bootstrap-ie11/
MIT License
96 stars 15 forks source link

Add background-color classes bg-* #99

Closed mweiss237 closed 3 years ago

mweiss237 commented 3 years ago

Hi guys,

I recently updated my webapplication to bootstrap 5 and all my background-colors were gone after having a look at it with IE11. The IE dev-tools and CANIUSE.com confirmed, that the var() command is not working in IE11. image

You guys already fixed that text- colors. Is it possible to fix the bg- colors too?

Thank you very much!

coliff commented 3 years ago

Heya. It's working correctly here: https://coliff.github.io/bootstrap-ie11/tests/#background

I think you are missing the default bg-opacity variable or something? Compare to my screenshot below:

image

mweiss237 commented 3 years ago

In your screenshot the style attribute is called -ieVar-!background-color: .... In my application it's just background-color: ... Sorry I'm not really familiar with Sass. Where can i define the default bg-opacity variable?

I installed the bootstrap-ie11 package and added it to my styles.scss like this:

@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/bootstrap-ie11/scss/bootstrap-ie11.scss"
coliff commented 3 years ago

Make sure you're loading the https://github.com/nuxodin/ie11CustomProperties polyfill. That's needed. When you inspect element you should see --ie - like in the screenshot.

Check my demo page for a working example and look at the source code: https://coliff.github.io/bootstrap-ie11/tests/

mweiss237 commented 3 years ago

Thanks! That fixed it! Forgot to add the customProperties import.

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>