We have what I believe is a regression bug in IE11 with Umami's recipe and article cards being vertically oversized. From memory, this issue might be caused by IE11 calculating the height of the flexbox item based on the non scaled size of the contained images.

Screenshot of Umami 8.6.1 from BrowserStack Windows 10, IE11, middle part of front page:

Umami's card layout broken in IE11

We'll need to fix and test all card displays on Home, Articles, Recipes, and Article and Recipe content types.

CommentFileSizeAuthor
#21 Win10-IE11-cards-home.png2.75 MBkjay
#20 2999723_after_fix_ie11_recipes-20.png934.89 KBpawandubey
#20 2999723_after_fix_ie11_homepage-20.png990.42 KBpawandubey
#18 umami-card-layout-ie11-2999723-18-recipes.png614.95 KBshaal
#18 umami-card-layout-ie11-2999723-18-homepage.png916.37 KBshaal
#18 interdiff_14-18.txt669 bytesshaal
#18 umami-card-layout-ie11-2999723-18.patch587 bytesshaal
#14 2999723-14.patch530 byteshiway
#9 interdiff_3-7.txt527 bytespawandubey
#7 2999723_after_fix_ie11_recipes_content.png574.49 KBpawandubey
#7 2999723_after_fix_ie11_recipes.png2.34 MBpawandubey
#7 2999723_after_fix_ie11_articles_content.png889.6 KBpawandubey
#7 2999723_after_fix_ie11_articles.png1.2 MBpawandubey
#7 2999723_after_fix_ie11.png950.08 KBpawandubey
#7 2999723_after_fix_ff.png378.4 KBpawandubey
#7 2999723_after_fix_chrome.png375.9 KBpawandubey
#7 IE11-layout-issue-2999723-7.patch487 bytespawandubey
#3 2999723-3.patch546 byteshiway
IE11-flexbox-breaking.png1.33 MBkjay

Comments

kjay created an issue. See original summary.

MaddieC’s picture

MaddieC commented
Assigned: Unassigned » MaddieC
hiway’s picture

hiway commented
StatusFileSize
new 2999723-3.patch546 bytes

Hey, guys! I added a small patch to fix that issue. Please, review.

hiway’s picture

hiway commented
Status: Active » Needs review
Mike Berry’s picture

Mike Berry commented

I have tested this patch in Chrome and Firefox. It worked fine.

hiway’s picture

hiway commented

@Mike Berry, sorry but the case here is the problem in IE11, so it should be tested with IE11.

pawandubey’s picture

pawandubey commented
StatusFileSize
new IE11-layout-issue-2999723-7.patch487 bytes
new 2999723_after_fix_chrome.png375.9 KB
new 2999723_after_fix_ff.png378.4 KB
new 2999723_after_fix_ie11.png950.08 KB
new 2999723_after_fix_ie11_articles.png1.2 MB
new 2999723_after_fix_ie11_articles_content.png889.6 KB
new 2999723_after_fix_ie11_recipes.png2.34 MB
new 2999723_after_fix_ie11_recipes_content.png574.49 KB

@hiway

I reviewed the patch and its working fine in IE11 and also tested for the stability purpose in Firefox and Chrome browser and found no issues.

I have tested on the below pages:

  • Home
  • Articles
  • Recipes
  • Article and Recipe content types

Suggestion related to code:
This fix only require overflow: hidden; and not getting any impact related to width:100%; on the <div class="node__content"> tag, as by default the block element takes 100% width and also there is no overridden display style applied to it. So, my suggestion is to remove the width:100%; along with the comment.

I have just re-rolled the patch with the above suggestion and no impact in appearance except the code. Please review and test the same and let me know your feedback.

andrewmacpherson’s picture

andrewmacpherson commented

@pawandubey - thanks for the updated patch. Can you provide an interdiff to show what's changed between patches #3 and #7?

pawandubey’s picture

pawandubey commented
StatusFileSize
new interdiff_3-7.txt527 bytes

@andrewmacpherson

Please find the attached interdiff file as requested.

hiway’s picture

hiway commented

@pawandubey Thank you for your work.
About this note:

Suggestion related to code:
This fix only require overflow: hidden; and not getting any impact related to width:100%; on the <div class="node__content"> tag, as by default the block element takes 100% width and also there is no overridden display style applied to it. So, my suggestion is to remove the width:100%; along with the comment.

As I remember, when I've been working on this issue, I was need to add width:100%, because in the IE11 some images may have wrong width and height. May be I'm wrong, but that was the case why I leaved width:100% there. Thank you.

pawandubey’s picture

pawandubey commented

@hiway

Can you please review this patch at your end? As this is a minor change.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
commented
Status: Needs review » Reviewed & tested by the community

I have tested the patch using Chrome, Firefox, and IE11 the following pages:
(In multiple resolutions, from mobile width to full desktop width)

  • Home
  • Articles
  • Recipes
  • Article and Recipe content types

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 7: IE11-layout-issue-2999723-7.patch, failed testing. View results

hiway’s picture

hiway commented
StatusFileSize
new 2999723-14.patch530 bytes

@pawandubey @shaal I reviewed this once again on my end. And created new patch which includes only overflow: hidden;, that's seems enough for now. I created new patch file against latest 8.7.x branch state as @pawandubey's patch failed tests.

hiway’s picture

hiway commented
Status: Needs work » Needs review
pawandubey’s picture

pawandubey commented
Status: Needs review » Reviewed & tested by the community

@hiway
Thanks for re-rolling this patch in latest version. We can again move this to RTBC.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review 
+++ b/core/profiles/demo_umami/themes/umami/css/components/content/card/card.css
@@ -44,3 +44,8 @@
+  overflow: hidden;

Could we use flex-shrink: 0; instead?

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
commented
StatusFileSize
new umami-card-layout-ie11-2999723-18.patch587 bytes
new interdiff_14-18.txt669 bytes
new umami-card-layout-ie11-2999723-18-homepage.png916.37 KB
new umami-card-layout-ie11-2999723-18-recipes.png614.95 KB

Yes! flex-shrink: 0; works perfect!

(Screenshots of IE11 through Browserstack)

Homepage
Umami's homepage in IE11

Recipes page
Umami's recipes page in IE11

volkswagenchick’s picture

volkswagenchick
she/her
Primary language English
Location San Francisco Bay Area
commented
Issue tags: +midcamp2019
pawandubey’s picture

pawandubey commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 2999723_after_fix_ie11_homepage-20.png990.42 KB
new 2999723_after_fix_ie11_recipes-20.png934.89 KB

Patch#18 reviewed, tested and its working fine as per the attached screenshot.
Moving this to RTBC

kjay’s picture

kjay commented
StatusFileSize
new Win10-IE11-cards-home.png2.75 MB

+1 for RTBC. Tested on Windows 10 IE11 and Firefox/Safari/Chrome with same results as @pawandubey

  • lauriii committed 7a3b237 on 8.7.x 
    Issue #2999723 by hiway, pawandubey, shaal, kjay, MaddieC, lauriii:...

  • lauriii committed 6a46637 on 8.6.x 
    Issue #2999723 by hiway, pawandubey, shaal, kjay, MaddieC, lauriii:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Confirmed manually with Chrome and IE 11 that the patch fixes the bug. Committed 7a3b237 and pushed to 8.7.x. Also cherry-picked to 8.6.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.