Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`ac-image` in Internet Explorer 11 stretches from max-width 100% but does not adjust height

See original GitHub issue

Platform

JavaScript

Author or host

Version of SDK

1.2

Issue

(card json is provided at the bottom)

On Chrome, an Adaptive Card renders as expected (with Web Chat host config):

However, when shown in Internet Explorer 11, the image is stretched and also has an invisible overflow that causes the card to display as much larger than expected:

Note that the image is stretched and the card no longer appears immediately above the input.

When inspecting the image, unchecking max-width: 100% shows the image in full size, showing that height is unadjusted when max-width is applied, making the image larger than the card’s original borders.

This is reproduced on the Adaptive Card visualizer:

Below is the json for the card in this example:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Airports"
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "size": "ExtraLarge",
                            "weight": "Bolder",
                            "text": "Sea-Tac"
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "3 ★★★☆☆ (856) · $$$$",
                            "isSubtle": true
                        },
                        {
                            "type": "TextBlock",
                            "size": "Small",
                            "text": "**Steve G. said** \"Another day, another airport.\"",
                            "wrap": true
                        }
                    ],
                    "width": 2
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://upload.wikimedia.org/wikipedia/commons/2/23/Deltalax_%28cropped%29.jpg"
                        }
                    ],
                    "width": 1
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "More Info",
            "url": "https://www.portseattle.org/sea-tac"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "speak": "three of five stars, 856 reviews, Extremely Expensive. Steve G said, \"Another day, another airport\""
}