Skip to content
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

IE 11 - image resizing bug? #75

Open
darby3 opened this issue Aug 14, 2015 · 28 comments

Comments

Projects
None yet
@darby3
Copy link

commented Aug 14, 2015

So, I'm resizing an image to fill the width of a flex div. In Chrome, this works like I would expect it to: the image fills the div by width and auto's the height proportionally. In IE 11, though, it appears to size the image correctly, but the surrounding body div sizes up its height (never collapses) as if the full height of the source image were there.

http://codepen.io/darby3/pen/waZRme?editors=110

IE 11 bug? Or am I doing something wrong?

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Aug 20, 2015

I think this is definitely a bug. What's interesting is it only seems to happen with a nested flexbox. If you comment out the flex declaration on the wrapper element, it renders correctly.

Have you found a workaround? I think there's a whole class of IE-related bugs that result from nested flexboxes, but I haven't found enough commonalities or generalized workarounds to be able to properly document them.

@darby3

This comment has been minimized.

Copy link
Author

commented Aug 20, 2015

I don't think I found a workaround yet (other than, like, using consistently sized images so at least I don't wind up with random bursts of excessive whitespace) but I'll be looking at my use cases again in the next week or so.

@darby3

This comment has been minimized.

Copy link
Author

commented Aug 25, 2015

Possible workaround: applying a 1px min-height to the body div in the above example collapses the div as I'd expect it to.

http://codepen.io/darby3/pen/VLoExv?editors=110

Kind of a shot in the dark, I stole the min-height idea from something else and tried it on a whim~~, but now I can't remember where I saw it/used it.~~; I have it applied to some form input elements in another project (for some reason that must have made sense at the time but which I didn't document)..

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Aug 27, 2015

Hmmm, it's very strange why 1px works but not 0px. I'm hesitant to suggest a workaround if I can't explain why it works. Any ideas?

@darby3

This comment has been minimized.

Copy link
Author

commented Aug 27, 2015

"Why" is a bit over my head. I can also say I just used a min-width:1px to make form inputs in Firefox respect a flex-basis percentage. It's all a bit magic pixie dust to me but I'd love to know if someone can explain what's going on here.

@ScottTrenda

This comment has been minimized.

Copy link

commented Dec 3, 2015

I just finished dealing with this bug. It's terrible and unintuitive. Here's a stripped-down code example that describes and replicates the bug in IE10 and IE11:
http://codepen.io/anon/pen/EPxaBJ
Adding min-height: 1px to the flex item does, in fact, work around the issue. There's some sort of sorcery going on here in IE's guts. My best guess is that the min-height forces IE to recalculate the height of the rendered content after all of the resizing, and that makes it realize that the height is different.
Here's the code example with the workaround: http://codepen.io/anon/pen/RrwPbG

Thanks @darby3 for putting up this workaround. I've been beating myself up over this stupid bug for a few days now, and never would have thought of min-height.

@rtack

This comment has been minimized.

Copy link

commented Jul 5, 2016

the problem is that while the immediate flexbox parent can be fixed like that. embedding the example into the sticky footer for example will still make the site-content use the effective image height and not the resized calculated image height.

@SteveByerly

This comment has been minimized.

Copy link

commented Mar 27, 2017

@ScottTrenda thank you so much! fixed my issues.

@DominicLee

This comment has been minimized.

Copy link

commented May 16, 2017

@ScottTrenda Thanks from 2017.

@spencerwalker

This comment has been minimized.

Copy link

commented Jan 10, 2018

@ScottTrenda Thanks from 2018.

@chicgeek

This comment has been minimized.

Copy link

commented Jan 11, 2018

This is a bug reported to Microsoft (I can't find the link now!). As it's for IE it's marked as a nofix, but with the above workaround in a comment as a solution.

@oneezy

This comment has been minimized.

Copy link

commented Jan 16, 2018

@ScottTrenda Thanks from 2019! (wanted to be first)

@YanaPivovarova

This comment has been minimized.

Copy link

commented Mar 3, 2018

@ScottTrenda Thank you so much. I've spent a lot of hours trying to solve that problem. Thank you!!

@jesterchen

This comment has been minimized.

Copy link

commented Mar 8, 2018

Another "Thank You!" from me. I was going crazy about this one.

@Jip-Hop

This comment has been minimized.

Copy link

commented Mar 22, 2018

As @rtack mentioned, the min-height trick doesn't work when the flexbox grid is inside of another flexbox grid, like the Holy Grail Layout. Here's my example philipwalton/solved-by-flexbox#114.

Seems like there isn't a workaround for this case...

@yowlonglee

This comment has been minimized.

Copy link

commented Jun 6, 2018

Thank you from 2018!

@alien-overlords

This comment has been minimized.

Copy link

commented Jun 22, 2018

Thanks from 2372.

@Anitorious

This comment has been minimized.

Copy link

commented Jun 27, 2018

@Jip-Hop
I seem to have discovered a work-around for this, setting the flex container to min-height: 1px and the image element to have a max-height: [VALUE], as well as max-width: 100%, with the max-height value being as large as you may want the image to be before the image stops being responsive. At least, this approach has worked for me.

@lejazz

This comment has been minimized.

Copy link

commented Jul 17, 2018

Thank you @darby3 and @ScottTrenda. You have made my day!

@edadams

This comment has been minimized.

Copy link

commented Aug 8, 2018

Thank you, @darby3 and @ScottTrenda! The two of you managed to save me from hours of frustration figuring out why this wasn't working.

It's a shame that this isn't in the Flexbugs page properly. FWIW, this issue is quite high up on the google search for "ie11 flexbox image size bug". It would be good if people were directed to the proper Flexbugs page than this issue, but I understand that it's due to lack of documentation. Anyway, thanks for this. 😄

@Muhammad-Ifrahim

This comment has been minimized.

Copy link

commented Aug 16, 2018

Hi everyone I go through all of the discussion it's a very good discussion but doing what you guys figure out still remain the height of the card same and the space is created between the image and the text

@joaoantoniorabelo

This comment has been minimized.

Copy link

commented Sep 18, 2018

I've got to the point that that I've set the max-width for the image inside the flex-item that would not affect height and would not affect the image resizing.

The layout I need to have is:
[--------]
[-] [-] [-]

The small boxes won't grow much until it reach mobile size and it would need some css changes to adjust for a stacked mobile display.

-FlexBox
--Flex-Item
---Img(width: 100%; max-width: 300px;)

@reloxx13

This comment has been minimized.

Copy link

commented Oct 5, 2018

happened for me today with bootstrap4 and an image inside .modal-body

min-height: 1px; on .modal-body fixed it.

//IE10/11 only
@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  /**
   * IE11 Fix image auto height
   * https://github.com/philipwalton/flexbugs/issues/75
   */
  .modal-body {
    min-height: 1px;
  }
}
@imrvelj

This comment has been minimized.

Copy link

commented Dec 14, 2018

THANKS! 🙏 🙏 🙏

@coreylafferty

This comment has been minimized.

Copy link

commented Jan 24, 2019

Thanks from 2019. :)

@SkReD

This comment has been minimized.

Copy link

commented Jan 28, 2019

Thanks a lot, @darby3 and @ScottTrenda!

Possible workaround: applying a 1px min-height to the body div in the above example collapses the div as I'd expect it to.

http://codepen.io/darby3/pen/VLoExv?editors=110

Kind of a shot in the dark, I stole the min-height idea from something else and tried it on a whim~~, but now I can't remember where I saw it/used it.~~; I have it applied to some form input elements in another project (for some reason that must have made sense at the time but which I didn't document)..

This also works with min-height: 0%

@flash1293 flash1293 referenced this issue Feb 11, 2019

Merged

Fix management footer logo spacing bug #30654

1 of 1 task complete
@MarcelMorgengry

This comment has been minimized.

Copy link

commented Mar 7, 2019

@ScottTrenda Thanks, worked perfectly for UIkit 3.0.3

enginehouse added a commit to PublicHealthEngland/talktofrank-beta that referenced this issue Mar 15, 2019

@sassquad

This comment has been minimized.

Copy link

commented May 22, 2019

Another thank you @ScottTrenda from me. This bug nearly drove me crazy today, and I'm sure it's kicked me up the behind a few times before today as well.

🙏🙏🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.