Skip to content

Workaround for the image size bug in IE#28855

Merged
XhmikosR merged 3 commits into
masterfrom
master-ysds-image-in-card
Jun 4, 2019
Merged

Workaround for the image size bug in IE#28855
XhmikosR merged 3 commits into
masterfrom
master-ysds-image-in-card

Conversation

@ysds

@ysds ysds commented Jun 1, 2019

Copy link
Copy Markdown
Contributor

Fixes #22448
Fixes #28839

See philipwalton/flexbugs#75

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.

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.

Demo: https://codepen.io/fellows3/pen/QRJmmx
Left: Chrome / Right: IE11

image

The min-height: 1px fixes that, but my concern is this affects unexpected parts (or not). At least there is no problem with accordions.

@ysds ysds requested a review from a team as a code owner June 1, 2019 00:17
@XhmikosR XhmikosR added the v4 label Jun 1, 2019
@XhmikosR XhmikosR merged commit d6e0552 into master Jun 4, 2019
@XhmikosR XhmikosR deleted the master-ysds-image-in-card branch June 4, 2019 07:25
@prosalesgmbh

Copy link
Copy Markdown

The min-height: 1px fixes that, but my concern is this affects unexpected parts (or not)

I just had to remove that line as it breaks our logic: we have 4 cards next to each other with 1 card header, 2 card bodies and 1 card footer. The second body contains the same content in all 4 cards (checks and crosses as they reflect packages with different availabilities). The upper body contains an individual explanation so the content length is different. To have all cards the same height I set up class="card h-100" and for the first body class="card-body h-100". This gets totally messed up when the min-height is provided and it seems there is no way to override that rule and set it to unset, initial, 0px whatever. Once it is present it messes up things.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

IE10/11 : carousel image spacing issue Wrong Img-Height when using 'img-fluid' inside a card on ie11

4 participants