Comments (14)
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.
from flexbugs.
@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.
from flexbugs.
Hey, sorry for the reply delay. I just tried this in ie11 on a virtual machine, works great!
from flexbugs.
At the moment, I am resorting to doing one of the following:
1. Copying code locally
On my local machine, I:
- Create a temporary CSS file and copy your CSS content from CodePen into it.
- Create a temporary HTML file and copy your HTML content from CodePen into it.
- Link the temporary CSS file as a stylesheet in the temporary HTML file.
- Open the temporary HTML file inside IE11 browser to preview the output.
2. Fork your Pen
On a supported browser (like Google Chrome), I:
- Sign-up for an account on CodePen.
- Login into CodePen.
- Fork your pen.
- Switch to CodePen's Debug Mode using the Change view button.
- Copy the Debug Mode URL.
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?
from flexbugs.
@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.
from flexbugs.
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?
from flexbugs.
@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!
from flexbugs.
@philipwalton / @mreinstein:
I have started some preliminary work on my fork here.
See the corresponding GitHub page here.
Things completed so far:
- Test if the GitHub page corresponding to README.md opens in IE11.
- Create 2.1.a-bug using GitHub pages.
- Create 2.1.b-workaround using GitHub pages.
- Test the GitHub page versions of 2.1.a-bug in IE11.
- Test the GitHub page versions of 2.1.b-workaround in IE11.
- Decide on a suitable folder structure and move the code examples if necessary.
- Add the links of 2.1.a-bug and 2.1.b-workaround in README.md to respectively point to the new GitHub pages versions of those examples.
- Test if the new links work - taking the user to GitHub pages.
from flexbugs.
@philipwalton / @mreinstein:
See the working example for Flexbug#2 in GitHub pages here: https://akaustav.github.io/flexbugs/#flexbug-2
Any feedback is welcome.
from flexbugs.
@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.
from flexbugs.
@philipwalton / @mreinstein / @gregwhitworth
Do you have any comments on PR #276 ?
from flexbugs.
@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.
from flexbugs.
Sorry for the slow reply! Left a few comments in the PR.
(Again, thanks so much for helping with this!)
from flexbugs.
I have verified that examples load from GitHub pages now instead of codepen. Thanks for your support @philipwalton, @mreinstein and @gregwhitworth.
from flexbugs.
Related Issues (20)
- ie nested flexbox with wrap overflow bug
- inline block content in a flex container not displaced
- #4 more accurate description HOT 1
- 'Flex-direction: column' in IE11 interacts badly with 'display: table'
- `flex: 1 1 0%` is different from flex: `1 1 0px` HOT 2
- Confusing issue template HOT 6
- IE11: align-items calculate baseline as bottom of table inside flex item
- .
- iOS Safari: align-items calculates baseline as bottom of input element HOT 4
- Minimum sizing of nested flexbox in Safari HOT 7
- webkit not honouring flex-basis percentage width with images HOT 1
- Addition to Flexbug #9: IE11 <tr> Element (Table Row) does not Support Flexbox
- The codepens for 12.1a and 12.1b have the same code HOT 3
- flex button child height not accepting 100 percent HOT 1
- Need code review and want to understand my hack about height=0px HOT 1
- column flex: wrong width on automatically resized img
- Align-self:center contents overflow combined with a parent's flex-direction:column
- Cant understand this issues
- Flexbug #12 (Inline elements not treated as flex-items) affected Safari 8, fixed in 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flexbugs.