Cards incompatible with IE11?


#1

My Contact page uses cards. It looks fine in IE11 (and all other browsers too) when viewed at the full browser window width (LG), but when I shrink the width of the browser window to cross over to the MD breakpoint, suddenly all the cards elongate to like 2000 pixels (just a guess) tall! No problems in Edge, but since 33% of our web visitors still use IE11, it makes me wonder what is going on. Here’s the page in question:

https://kiramek.com/testsite/contact.html

If any of you could test this in IE11 and give me your thoughts, I’d appreciate it.

Thanks.


#2

Hello @JDW I found the problem. in the class .card-body you have in flex, the following attributes:
-flex-grow: 1
-flex-shrink: 1
-flex-basis: auto
And the result is this (as you describe):

But if you change the attributes of the flex to the following:
-flex-grow: 1
-flex-shrink: 1
-flex-basis: 0

There you have the result:

Hope it will help you…


#3

@Pealco

I am humbled by your kind helpfulness and sheer brilliance!

But the “.card-body” Class isn’t something I added, so isn’t what you describe a problem in Blocs and/or a problem in Bootstrap 4? (Cards are a part of Bootstrap.)

According to this GitHub discussion, The Bootstrap folks said they fixed the problem by using:

.card-img-top {
     max-width: 100%
     flex-shrink: 0;
}

But obviously that isn’t working in Blocs as per my example. But interestingly, their “fix” doesn’t include your fix of changing “-flex-basis” to zero. So I’m not sure what to think or do at this stage.

Here’s a Reddit discussion, but their approach was not to change “-flex-basis” to zero.

Oh, how I hate MSIE! But I am forcing to support the stupid thing.

Thoughts?


#4

That solution they present doesn’t work because the problem is in the body of the card.

I’m looking for some documentation about the flex basis and found this article:

So instead of putting the value to 0 you can add a frame size of 10px or you can use the content attribute.

If you want send only that page and I try to implement the solution in your page.


#5

Here is that one page:

contact.zip (196.4 KB)


#6

Hello @JDW I try the contact you send and it should missing something as only this is working correctly. please open the bloc in a new project export it with any minify and check the problem not occurred.


#7

No, it definitely shows the same problem in IE11. You are testing it incorrectly. Here’s that example page on my server. Steps:

  1. Open IE11 on a real PC. (Windows 8.1 is what I use.)
  2. Open this link in IE11 and it should look perfectly fine.
  3. Decrease the WIDTH of the browser WINDOW and when it crosses a breakpoint, suddenly the height of the cards will become 2000px+!

If you don’t decrease the width of the browser window, you cannot see the problem.

Let me know your thoughts when you confirm the problem.

Thanks,

James


#8

The following page in my site is most horribly afflicted in IE11 because all the text is smashed at left into a single character wide column, even when viewed in LG (IE11 browser window with)!

https://kiramek.com/compliance.html

Any ideas on why would be appreciated. No other browsers are affected. It’s stupid IE11!

Ack!

James


#9

Still no replies?

:cry:

Sometimes I take joy in stumping forum experts, but this is NOT one of those times. Surely there must be at least one person in this forum who can offer some sage direction on this issue?

To encourage replies, here are screenshots:

And once again, here’s my built-in-Blocs web page:

https://kiramek.com/compliance.html


#10

Hello @JDW what’s the difference from the white boxes and grey boxes?
Only the grey ones have that problem.

I think is something related with text-lg-left that you have in those grey Blocs.

The white ones have text-lg-center and works…

Look the code:


#11

Thank you for your reply, @Pealco.

Upon closer examination of the left sidebar, I see a Blocs bug at work on my “compliance.html” page. There is a row inside a row in that particular bloc of text. Funny though that no other browser has an issue with it. It’s only IE11. Even so, I moved the row out of the row, uploaded and tested, and now that particular bloc is fine. FIXED!

However…

As I mentioned earlier in this thread, my contact page uses cards. Cards suddenly grow to be very tall when I shrink the browser window width past the MD breakpoint. That problem isn’t related to a row-in-a-row Blocs bug. Here’s the page:

https://kiramek.com/contact.html

And here’s my earlier reply to you on that problem:

Thoughts?


#12

Sorry miss this from you… I’ll see it in the morning and let you know.


#13

Thank you, @Pealco.

By the way, here’s another page on my website which uses Cards. It looks fine in IE11 in LG and MD, but when I cross over to the SM and XS breakpoints, all the cards elongate with a huge amount of whitespace. So it’s the same problem as my contacts.html page:

https://kiramek.com/products.html

And here is yet another page in my site that has problems ONLY in IE11:

https://kiramek.com/new.html

It looks fine in LG and MD, but when I make the IE11 browser window more narrow than SM and XS, the Column that contains my two catalog images (the images with the little PDF icon in them) is missing. Again, this is only in IE11, and only in SM & XS. And there is no row inside a row problem here.

Here’s a Blocs screenshot showing the Column in question:

And if all that wasn’t bad enough, here is yet another page in my site that has huge gaps between my two white buttons AND the topmost table is missing too, ONLY in IE11 and ONLY when the browser window is narrowed to XS:

https://kiramek.com/download.html

And to top if off, my search feature (click the magnifier in the upper right corner of any page, in any breakpoint) is totally dead in IE11 regardless of page or breakpoint. Clicking the magnifier does nothing in IE11. It’s only IE11. Firefox and Chrome for Mac and Windows, along with Safari, and iOS browsers work perfectly.

IE11 Errors, Warnings, etc. on my top page:

IE11 is such a bothersome browser! I loath the fact I need to support it! But 62% of our web visitors still use desktop computers (not mobile), and 30% of those desktop users use IE11 (90%) or IE9 (10%). If someone could please rescue me from this browser compatibility evil, I would be eternally grateful!


#14

That happens also in Chrome because of an incorrect JavaScript statement.

Difficult to say which one, as you html code is minified.

Cheers, Jannis


#15

You are talking about Warnings/Messages in Chrome, but in Chrome on MacOS X and Chrome on Windows displays the page perfectly across all breakpoints. It’s only IE11 that’s driving me mad visually. Honestly, if the page looks like, I couldn’t care less about the errors!


#16

@JDW yesterday we found that minifying the html code produce errors in some scripts. Please try unminify your project and check for the same errors.


#17

What specifically should I untick?


#18

“Minify HTML” and “Minify Main CSS”


#19

Done. And I just re-uploaded all the *.html files and style.css (the only CSS file that gets unminified), and reloaded in IE11, but everything I said before remains true. Same page errors when I open the IE11 Console (F12 key). Same elongated boxes. Same gaps. Same missing table. Etc…

No changes at all by unminifying.

Those of you with a copy of IE11, either on a real Windows PC or using Virtual Box (I’ve tested in both), can test my Blocs created pages here:

https://kiramek.com


#20

Still you habe JavaScript errors on your website, doesn’t matter which browser.