Cards incompatible with IE11?

Hello @JDW, not here…

Check LG

LG minus some pixels:

SM:

XS:

So I can’t replicate your problem… don’t know why…

There is my IE:

Actually, your screenshots clearly show you DID reproduce the problem! Have a look at the tire in LG and compare with “LG minus pixels” where the tire is horizontally smashed! Then look at how those keys are stretched horizontally and look awful in SM! Now compare in Chrome, Firefox and Safari and you won’t see that happening at all!

So again, I am talking about graphics being horizontally smashed or stretched in IE11. As you can clearly see in your own screenshots that is happening. But it doesn’t happen in all other browsers, not even Edge.

I look forward to hearing your thoughts!

Thanks.

I see now, ok, can you please send me that page to have a look please?

Here is the single page document with all the graphics, saved in the newest release version of Blocs:

Stretched_Images.zip (1.9 MB)

Hello @JDW, found it, auto flex is not very compatible with IE, so there is the solution:

Go to to the code of the page and add the following code:

img {
  max-width: 100%;
  flex-shrink: 0;
  align-self: flex-start;
}

There is the the result:

BEFORE SM:

AFTER SM:

BEFORE MD:

AFTER MD:

BEFORE XS:

AFTER XS:

Hope it help you, so I think there is no problems now… LOL

2 Likes

@Pealco

Your code-genius continues to shock, amaze and delight me! I just added the following code to Page Settings > Header and found it works now in all browsers! THANK YOU!

<style type="text/css">
img {
  max-width: 100%;
  flex-shrink: 0;
  align-self: flex-start;
}
</style>

QUESTION: Since this code works well in all browsers, when then isn’t it used by default in all Cards in Blocs? Should I propose this to @Norm, or is there a caveat?

Hello @JDW this normally should work in all browsers, but IE is a very special browser.
All things have to be explained to IE as he was very stupid, all the others browsers know what they have to do.
But you can check all bugs about flex in this site:
Link
And you find that ie have a lot…

I understand that. But my question is still important. Think about it. If your code works in all browsers, including buggy IE11, why not use your code by default? That was my question in my previous post.

Why do I even ask this question? Because IE11, love it or hate it, isn’t quite dead. Again, almost 30% of my Microsoft browser web visitors still use IE11. Anyone in my shoes (and I doubt I am alone) knows you have these choices:

  1. Redirect all IE users to an old browser page telling them they cannot see the site unless they upgrade. (I do this for versions of IE lower than 11.)
  2. Show your site as-is and let it break in IE11, making your site look stupid to web visitors too stubborn or ignorant to use a better browser. (Some people are forced to use browser versions their companies provide, and here in Japan, they use old versions of Windows and IE too.)
  3. Try to fix problems in at least IE11 – which is what I’ve been doing, with your kind help. And so long as those fixes work in all browsers and don’t bloat page code too badly, this seems the best approach.

So again…

If your code works in all browsers, including buggy IE11, (and it does) why not use your code by default in Blocs (in Cards)? Why continue to use other code that causes known problems in IE11?

I understand your point and it’s true, if this code works probably is better then other code that in not full compatible. But ask @Norm to check how can this be improved, and why the core code is not like this, I think he will probably have a reply to this.

But I assuming that probably as the new browsers works with all new technologies, and with new codes, we have to point BlocsApp for the new browsers and technologies. But … I don’t know. Please talk to @Norm and see if he can change something.

This code could be not compatible with some device, I don’t know.

1 Like