IE11 - intermittent gap at the bottom of the transcript above SendBox

[corinagum]

As it turns out, this repros both for adaptive cards and markdown images. This is not isolated to
Repro steps:

1. Open Mock Bot in IE11
2. Type help
3. Press button: 'Show review using Adaptive Card'
4. Note the big gap on the transcript between the send box and the most recent message, the unordered list.

JSON causing this issue:

{
    "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\""
}

[compulim]

Shortening the repro:

• Type help to make sure the screen is filled with content
• Type card review

The primary problem is AC set max-width to 100% on the ac-image, that's why the image on top-right is squashed.

If we set it to a non-percentage value, it will just works.

I am more convinced this is IE11 related layout issues in Adaptive Cards. Will try different previous versions and see if it produce same result.

[compulim]

This is related to the size of the image and the way AC render the image trigger a bug in IE11. IE11 calculate the height of the container box wrongly.

File an issue to Adaptive Card team, including few things:

1. Adaptive Card payload (JSON + image) with the problematic card
2. Repro of the issue outside of Web Chat (to clear our name)
   • You will need to show the "invisible height" of the container box

[corinagum]

I have filed a bug with Adaptive Cards, and in the meantime I updated our Mock Bot with a smaller image so that this render error will not occur on Web Chat with Mock Bot. :)

compulim/BotFramework-MockBot#16

[corinagum]

I filed the issue with Adaptive Cards here: microsoft/AdaptiveCards#3056