New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explicitly set flex-basis with lost-column for IE11 support. #329

Closed
raymondwang opened this Issue Oct 5, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@raymondwang

raymondwang commented Oct 5, 2016

Is this a feature request or a bug report?
Bug report for compatibility with IE10-11: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

What is the current behavior?
lost-column sets flex-basis via flex shorthand, i.e. flex: 0 0 auto;.

If it's a bug please provide the steps to reproduce it and maybe some code samples.
lost-column: 10/12; output includes:

flex: 0 0 auto;
width: calc(99.9% * 10/12 - 5px);

This is a perceivable bug on Internet Explorer 10 and 11, and causes a variety of visual issues under different circumstances.

What is the behavior that you expect?
The easiest solution would be to simply add an additional property flex-basis, set to the same value as width. Therefore:

lost-column: 10/12; output:

flex: 0 0 auto;
flex-basis: calc(99.9% * 10/12 - 5px);
width: calc(99.9% * 10/12 - 5px);

Arguably a more robust method would be to just declare flex properties independently, but this is more or less trivial and purely an issue of semantics.

lost-column: 10/12; output:

flex-shrink: 0;
flex-grow: 0;
flex-basis: calc(99.9% * 10/12 - 5px);
width: calc(99.9% * 10/12 - 5px);

What's the motivation or use-case behind changing the behavior?
I am under the impression that this would be relatively straightforward to implement, have no perceivable negative output, and simply improve this package for a browser that is still used by a nontrivial proportion of internet users (for reasons I will never understand).

What version of LostGrid, browser and browser version are affected by this issue? Did this happen in previous versions?
Internet Explorer 10 and 11. I imagine this issue has existed forever.

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 13, 2016

Owner

Tackling this now. It's slated to be in the LostGrid Version 8 release.

Owner

peterramsing commented Nov 13, 2016

Tackling this now. It's slated to be in the LostGrid Version 8 release.

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 13, 2016

Owner

Thanks for the super descriptive issue request! Makes my life so much easier!

Owner

peterramsing commented Nov 13, 2016

Thanks for the super descriptive issue request! Makes my life so much easier!

@peterramsing peterramsing referenced this issue Nov 13, 2016

Merged

Bugfix/flex basis for ie #341

2 of 2 tasks complete

peterramsing added a commit that referenced this issue Nov 13, 2016

peterramsing added a commit that referenced this issue Nov 13, 2016

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 13, 2016

Owner

@raymondwang This is now live in the Beta release. Please give it a try and let me know if you have any other issues with it.

Closing for now but feel free top open it again if I missed something. Thanks again for catching this!

Owner

peterramsing commented Nov 13, 2016

@raymondwang This is now live in the Beta release. Please give it a try and let me know if you have any other issues with it.

Closing for now but feel free top open it again if I missed something. Thanks again for catching this!

@raymondwang

This comment has been minimized.

Show comment
Hide comment
@raymondwang

raymondwang Nov 21, 2016

Thanks @peterramsing! Appreciate it. Looking forward to testing out the improved compatibility.

raymondwang commented Nov 21, 2016

Thanks @peterramsing! Appreciate it. Looking forward to testing out the improved compatibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment