Adaptive Card v1.6 renders inconsistently on Teams iOS mobile (Badge/Icon/Table/targetWidth) while Desktop render correctly

[ArunaEdirisinghe1]

Steps to reproduce

1. Send the following Adaptive Card as a bot/proactive message in Microsoft Teams:
   { "type": "AdaptiveCard", "version": "1.6", "body": [ { "type": "TextBlock", "text": "Contract update", "style": "heading" }, { "type": "Badge", "text": "Marked as signed", "appearance": "good" }, { "type": "Image", "url": "https://adaptivecards.io/content/cats/1.png", "size": "Small", "altText": "Active image" }, { "type": "Table", "columns": [ { "width": 1 }, { "width": 1 } ], "rows": [ { "type": "TableRow", "cells": [ { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Status" } ] }, { "type": "TableCell", "items": [ { "type": "TextBlock", "text": "Marked as signed" } ] } ] } ] }, { "type": "Container", "targetWidth": "AtMost:Narrow", "items": [ { "type": "TextBlock", "text": "Narrow layout block" } ] } ], "actions": [ { "type": "Action.OpenUrl", "title": "Open", "url": "https://example.com", "tooltip": "Open details" } ] }

2. Open the same message on:
   Teams iOS mobile app
   Teams Android mobile app
   Teams Desktop/Web

3. Compare rendering of:
   Badge text
   Table layout
   Heading/spacing
   Target Width behavior

Expected behavior

Adaptive Card rendering should be consistent across Teams clients.
iOS, Android mobile and desktop should render with equivalent behavior for supported features.

1. On desktop, both “Marked as signed” and “Active” labels are displayed correctly. However, when checked on Apple iOS, “Marked as signed” is not shown fully, only “Marked” appears. This issue was not seen on Android.
2. On desktop, the “Signed” label is also displayed correctly, and the text fits properly inside the label.
   But on Apple iOS, there is extra blank space on the right side inside the “Signed” label. This issue was not seen on Android.

Actual behavior

Teams iOS mobile shows inconsistent rendering compared to Teams Android/Desktop/Web.
Some elements/features in v1.6 cards do not render as expected on iOS (layout/text presentation differs).

1. On desktop, both “Marked as signed” and “Active” labels are displayed correctly. However, when checked on Apple iOS, “Marked as signed” is not shown fully, only “Marked” appears. This issue was not seen on Android.
2. On desktop, the “Signed” label is also displayed correctly, and the text fits properly inside the label.
   But on Apple iOS, there is extra blank space on the right side inside the “Signed” label. This issue was not seen on Android.

Error details

Card schema version: 1.6
Features used: Badge, Icon, Table, targetWidth, tooltip, TextBlock.style
Platform comparison:

• iOS
• Android
• Desktop/Web

1. On desktop, both “Marked as signed” and “Active” labels are displayed correctly. However, when checked on Apple iOS, “Marked as signed” is not shown fully, only “Marked” appears. This issue was not seen on Android.
2. On desktop, the “Signed” label is also displayed correctly, and the text fits properly inside the label.
   But on Apple iOS, there is extra blank space on the right side inside the “Signed” label. This issue was not seen on Android.

[m365-agent-toolkit-assistant]

👋 Hi @ArunaEdirisinghe1,

Thank you for reporting this issue! We want to let you know that:

⏱️ Our team will personally review your issue
🎯 You can expect a response within 1 business day

✨ This is an AI-generated initial response
🤖 AI-Generated Preliminary Analysis:

Classification: Upstream — this appears to be a Teams iOS client rendering limitation/regression, not an app payload issue, because the same v1.6 card renders differently across Teams clients.

• Microsoft Learn says Teams mobile formatting can differ from desktop for Adaptive Cards, and that cards using versions later than mobile-supported versions can render with “limited or inconsistent functionality.”
• Learn also states Teams supports Adaptive Card features only up to v1.5 or earlier in Teams docs, while your payload uses v1.6 features (Badge, targetWidth, tooltip, TextBlock.style, Table interplay).
• Your repro is cross-client: Desktop/Web and Android behave differently from iOS, which is consistent with a host-client rendering issue.

Upgrade check: No repo changelog/version fix applies here; this is a Teams client/platform-side issue.

What to do now:

1. Avoid version: "1.6" for production Teams mobile scenarios; target v1.5 or lower.
2. Add fallback layouts for mobile; avoid relying on Badge/responsive behaviors on iOS.
3. If needed, replace Badge with TextBlock/ColumnSet styling that degrades predictably.

Useful links:

• No similar issues found in the searched repos.
• https://learn.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#adaptive-card
• https://learn.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/cards-format#format-cards-with-markdown
• https://learn.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards#best-practices

If you want, I can help rewrite this card to a safer Teams-mobile-compatible version.

---

Note: This is an automated first response generated by AI. A human team member will review your issue and provide a more detailed response soon. We appreciate your patience!

[microsoft-github-policy-service]

Hi @ArunaEdirisinghe1! We will investigate and if we require further information we will reach out to you. Please use this link to escalate if you don't get replies in two working days.

Best regards, Teams Platform