search

philipwalton / flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
MIT License
13.63k stars 495 forks source link

CodePen does NOT support Internet Explorer 11 (IE11) #274

Closed akaustav closed 4 years ago

akaustav commented 5 years ago

This is more of an inconvenience than a problem. All examples in this repository are on Codepen. CodePen displays the following warning message when I attempt to open the bug and workaround examples provided on this repository in the Internet Explorer 11 (IE11) browser on a Windows 10 machine.

image

akaustav commented 5 years ago

At the moment, I am resorting to doing one of the following:

1. Copying code locally

On my local machine, I:

2. Fork your Pen

On a supported browser (like Google Chrome), I:

Then, in IE11, I paste the Debug Mode URL into the address bar and open the page.

Is there a better way to get past this warning message and preview the bugs and their workarounds in IE11 apart from the steps which I have mentioned above?

mreinstein commented 4 years ago

It might make sense to move all of the codepen hosted examples into static html and host them on github pages. This would enable the samples to run in ie, and it also means the information in this repo is not dependent on some external resource for hosting part of it's content, making it more resilient in the long run.

akaustav commented 4 years ago

@mreinstein I like that idea. Would you happen to have one (or two) such examples using static html hosted on GitHub pages (in a separate branch/fork, maybe)? If yes, perhaps I can devote some time to eventually add all other examples using the same idea to GitHub pages.

mreinstein commented 4 years ago

I don't have any examples handy, but github has very nice tutorials for using github pages. It's pretty straightforward I think.

The bigger issue is if this is a strategy that the maintainer(s) would like to pursue (it requires setup by the repo owner.) @philipwalton is hosting these examples via github pages something you'd be open to?

philipwalton commented 4 years ago

@mreinstein yes, totally open! Also, I haven't had much time to maintain this repo lately, but if others wanted to help contribute, I'd be happy to give admin rights to people. Let me know!

akaustav commented 4 years ago

@philipwalton - Let me (@akaustav) and/or @mreinstein try doing the initial setup and an example on a fork. That way you can be sure that we are worthy of becoming admins on this repository.

akaustav commented 4 years ago

@philipwalton / @mreinstein: I have started some preliminary work on my fork here. See the corresponding GitHub page here.

Things completed so far:

akaustav commented 4 years ago

@philipwalton / @mreinstein: See the working example for Flexbug#2 in GitHub pages here: https://akaustav.github.io/flexbugs/#flexbug-2

Any feedback is welcome.

akaustav commented 4 years ago

@philipwalton / @mreinstein: I have opened PR #276 as a proof of concept solution to this issue. Feel free to put any code review comments there.

akaustav commented 4 years ago

@philipwalton / @mreinstein / @gregwhitworth Do you have any comments on PR #276 ?

mreinstein commented 4 years ago

Hey, sorry for the reply delay. I just tried this in ie11 on a virtual machine, works great!

Screen Shot 2020-02-14 at 11 28 13 AM
akaustav commented 4 years ago

@mreinstein - Thanks for confirming the functionality. Do you have any specific feedback on the GitHub pages theme which I use? Or perhaps on the files inside src/ folder on my fork (folder structure, file naming convention, file contents, etc.)?

@philipwalton - I presume you are busy at the moment. Until you get some time to review, I am going to continue on the same approach for the remainder of the bugs and workaround on my fork. And perhaps you (or I - if I am granted admin rights) can merge my PR #276 into this repo.

philipwalton commented 4 years ago

Sorry for the slow reply! Left a few comments in the PR.

(Again, thanks so much for helping with this!)

akaustav commented 4 years ago

I have verified that examples load from GitHub pages now instead of codepen. Thanks for your support @philipwalton, @mreinstein and @gregwhitworth.