jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.19k stars 3.95k forks source link

Support for IE11 #252

Closed c-cho closed 2 years ago

c-cho commented 8 years ago

It seems that bulma has some support issues on IE 11, especially for the modal dialog.
My IE version: 11
↓↓GIF↓↓ bulma-issue

c-cho commented 8 years ago

@jens1o I'm not against getting rid of IE, but I think this issue should be treated as a bug currently rather than anything else. See:

j5bot commented 8 years ago

Unfortunately my company requires support of IE11 for the moment (not before 11, though). I really like what I have been able to do so far with bulma and definitely want to see these issues ironed out.

As I encounter problems and their fixes in IE11, I will gladly submit patches.

sam-wheat commented 8 years ago

I also very much like what I have seen of this framework but I need IE 11 support.

ShaggyDude commented 8 years ago

I can look into these if nobody else is?

Alamantus commented 7 years ago

I can confirm that @c-cho 's patch (https://github.com/c-cho/bulma/commit/b29bf69bfe758107c6cd18b8bc8db80b56c18fef) fixes the modal issue in IE11

aloisdg commented 7 years ago

We are looking to use Bulma. We have to support IE11. Why @c-cho wasnt merge? How can I help?

dhireng commented 7 years ago

IE11 support is needed please.

enun03 commented 7 years ago

Apparently bulma's modal flexbox implementation is causing issues on IE11. Just add this code to the 'bulma.css' file: @media screen and (min-width: 779px){ .modal.is-active { display: -webkit-box; display: -ms-flexbox; display: inline-block; } .modal-card{ margin-top: 5%; } }

Altough this approach might not be the best way to go around this issue since it might still give you responsiveness issues.

yumyo commented 7 years ago

Wondering if anyone working on commercial projects could really be able to just skip supporting one of the major browsers in the market. However, I think there is also a problem of expectations. A framework is not a magic solution for any scenario, each case is different and will require different fixes/fallbacks. So, it would probably be more effective to start a troubleshooting Wiki than bloating Bulma.

Boscop commented 6 years ago

Any update on this? Our company also needs to support IE11 :/

drawcard commented 6 years ago

Same here, I build a lot of government websites and there's still a proliferation of IE11 on older Win7 era machines, within departments. I'd like to use Bulma for these sites but I can't while IE11 support is required.

styfle commented 6 years ago

If you need support for IE, Bootstrap 4 supports 10+ and its actually smaller than bulma.

drawcard commented 6 years ago

Cheers, I will look into that, I didn't realise BS4 made it out of beta.

I've also been playing around with Tachyons & Flexboxgrid, which follow a different methodology to Bulma/BS4, but are massively lightweight and require no SASS compilation to customise stuff (about 3kb + 4kb all up). They're more utility based libraries, and can probably complement something like BS4 / Bulma.

focussing commented 6 years ago

Please add IE11 support and mention on the website what Browsers are supported.

VizuaaLOG commented 6 years ago

@focussing If you require IE11 support as mentioned above then you should use a different CSS library. Bulma is built to be a modern CSS library which means flexbox is used. IE11 does not fully support flexbox (why? Only Microsoft knows...) and so is not fully supported by Bulma.

Microsoft has basically discontinued Internet Explorer, while IE 11 will receive security patches it will not receive new features. Unfortunately, this means that if a very small percentage of your potential users will use IE then you'll need to make a decision whether to support them or not.

jens1o commented 6 years ago

Bulma is built to be a modern CSS library which means flexbox is used.

It then should be based on CSS-Grid. 🤣

Many cms systems based on flexbox are supporting IE11.

drawcard commented 6 years ago

Microsoft has basically discontinued Internet Explorer, while IE 11 will receive security patches it will not receive new features. Unfortunately, this means that if a very small percentage of your potential users will use IE then you'll need to make a decision whether to support them or not.

Unfortunately while you're correct, that small contingent of users are usually major clients (eg. government agencies / corporations that still stipulate Win7 machines with IE11 only for various reasons). Sadly that precludes us devs from using cool things like Bulma for important web design jobs.

I know that Bulma's priorities lie with supporting modern browsers first, which is how it should be. If anything, corporations should move with the times and switch to an evergreen browser that's always up to date.

However it may be too premature to completely write off IE11 today, since it's still popular within corporate environments. It would be good to have Bulma's critical stuff working, like grid layouts, without having to patch in another flexbox solution just for that task. That's just my 2c anyhow, take it or leave it 😆

FWIW I've found https://getuikit.com/ to be a pretty good solution for IE11 if anyone is stuck, and you're wanting an alternative to Bootstrap.

focussing commented 6 years ago

Thank you all for commenting!

It is a pity IE11 is not supported. All my latest projects are based on the great combination of VueJS and Bulma. @jgthms Do you have any plans for IE11 support? Whether we like it or not, IE11 is still being used.

The audience is indeed related to schools. I checked the analytics page of the website and found that 26.1% of the browsers was IE11.

My problem is described here. If someone has an idea where to look to solve the problem... That would be great!

Right now some other websites must be converted from Bulma to BS4. As of them are VueJS sites so in those cases will be using vue-bootstrap.

chobo2 commented 6 years ago

I am confused, on this page: https://bulma.io/alternative-to-bootstrap/

It says that 90% of IE 11 is supported, yet this topic makes it almost sound like it is alot less. Where can I actually find a list of what would not work in IE 11, other than just some percent?

Thanks

keithpickering commented 6 years ago

I'd also like more specifics on what is and isn't supported in IE11. 90% support sounds good enough, but it could also mean the 10% that doesn't work is something fundamental like the grid system.

emkajeej commented 6 years ago

IE11 has partial Flexbox support. It would be quite the chore to retest every release of Bulma against IE11 and list all potential issues one might run across, I imagine.

That said, most IE11 flexbox bugs can be worked around. The most common issue is IE11's interpretation of flex-basis. I would recommend referring to https://github.com/philipwalton/flexbugs when building your Bulma based website, implementing fixes where needed.

benjaminapetersen commented 6 years ago

Agree w/ @chobo2's comment, probably most responsible would be to have a badge or something in the docs on each component that is not supported in IE.

JonathanYiv commented 6 years ago

Agree with above - and possibly the badge could link to potential fixes.

samiggapps commented 5 years ago

If anyone arrives on this page and is having issues with modal scrolling on IE11 this code will sort it:

.modal-card{
  overflow: auto;
}
focussing commented 5 years ago

I had to completely remove Bulma from a few apps because of IE11 non-compatibility, and go back to Bootstrap4...

focussing commented 5 years ago

Any development on this issue?

DydjyZ commented 4 years ago

UP

13protons commented 4 years ago

Are people actually still having IE11 issues? Bulma looks great on the win10/IE11 VM supplied by modern.ie

Screen Shot 2020-07-29 at 10 24 54 PM Screen Shot 2020-07-29 at 10 22 33 PM Screen Shot 2020-07-29 at 10 21 50 PM