[AdaptiveCards][TableCell BackgroundImage] iOS shows cross-cell overlap; Android does not render transparent background; PC/Web renders correctly

[MamoruKuroda]

Steps to reproduce

Steps to reproduce

1. Use an Adaptive Card with a Table (2 × 2 layout) and set a 1×1 px transparent PNG as the backgroundImage for each TableCell (light gray / very light gray).
   • No bleed is specified (bleed not used).
   • Card version: 1.5 (Table/TableRow/TableCell).
   • Background image uses default settings (or explicitly set as shown below).
2. Send/render this card in NewCommunicator on PC/Web, iOS, and Android.
3. Observe visual result per platform.

Minimal payload example

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    {
      "type": "Table",
      "columns": [
        { "width": "auto" },
        { "width": "auto" }
      ],
      "rows": [
        {
          "type": "TableRow",
          "cells": [
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "1×1 px light gray (transparent)" }],
              "backgroundImage": {
                "url": "<URL to 1x1px light-gray transparent PNG>",
                "fillMode": "cover",
                "horizontalAlignment": "Center",
                "verticalAlignment": "Center"
              }
            },
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "1×1 px light gray (transparent)" }],
              "backgroundImage": {
                "url": "<URL to 1x1px light-gray transparent PNG>",
                "fillMode": "cover",
                "horizontalAlignment": "Center",
                "verticalAlignment": "Center"
              }
            }
          ]
        },
        {
          "type": "TableRow",
          "cells": [
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "1×1 px very light gray (transparent)" }],
              "backgroundImage": {
                "url": "<URL to 1x1px very-light-gray transparent PNG>",
                "fillMode": "cover",
                "horizontalAlignment": "Center",
                "verticalAlignment": "Center"
              }
            },
            {
              "type": "TableCell",
              "items": [{ "type": "TextBlock", "text": "1×1 px very light gray (transparent)" }],
              "backgroundImage": {
                "url": "<URL to 1x1px very-light-gray transparent PNG>",
                "fillMode": "cover",
                "horizontalAlignment": "Center",
                "verticalAlignment": "Center"
              }
            }
          ]
        }
      ]
    }
  ]
}

Please see full payload json sample. 👉 AdaptiveCard_TableCell_bg.json

Expected behavior

Expected behavior

• Each TableCell background is independent and clipped to the cell bounds.
• No overlap between adjacent cells.
• All platforms (PC/Web, iOS, Android) show consistent visuals.

Actual behavior

Actual behavior

• PC/Web: Renders correctly (each cell has its own light/very light gray background).
• iOS: The right cell’s background appears to overlap into the left cell (cross-cell background bleed/overlay), even when non‑transparent single‑color PNG (green) is used.
• Android: The transparent background image is not rendered at all (cells remain white).

PC

Android

iOS

Screenshots / attachments

• PC/Web: correct rendering (each cell independent background).
• iOS: overlap (right cell background overlays left).
• Android: no background rendered (cells white).
• JSON: AdaptiveCard_TableCell_bg.json (attached).

Error details

Error details

• No runtime exceptions logged in NewCommunicator; this is a visual rendering inconsistency.
• Card validates; payload parses and renders on all hosts.

Environment

• Host app: NewCommunicator
• Adaptive Cards schema: 1.5 (Table/TableRow/TableCell)
• iOS: 18.6.2 / iPhone14
• Android: Android16 / Pixel8a
• PC/Web: Windows 11 Pro / Teams Client 25306.804.4102.7193

Workarounds tried / Additional context

• Non‑transparent single‑color PNG (green) background:
  • On iOS, overlap still observed (right top cell’s green background appears over the left top cell area).
  • 
• We do not use bleed.
• Hypothesis: Platform renderers may not clip TableCell backgrounds consistently; Android may ignore transparent background images for TableCell.
• Request: Guidance on expected renderer behavior for TableCell.backgroundImage and fixes/workarounds at SDK/host level.

[microsoft-github-policy-service]

Hi @MamoruKuroda! 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

[m365-agent-toolkit-assistant]

👋 Hi @MamoruKuroda,

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:

Your issue with backgroundImage on Adaptive Cards TableCells—showing overlap on iOS and not rendering on Android—is consistent with several known Adaptive Card mobile rendering bugs:

• iOS: Inconsistent clipping of TableCell backgrounds is a reported problem. Images and backgrounds sometimes "bleed" across adjacent cells. There’s no specific fix released; it’s speculated to be a renderer bug for TableCell backgrounds. [Ref Adaptive Card Image appears stretch in iOS #4555, Card fails to render in Teams on iOS #3252]
• Android: Transparent background images may not render due to selective image handling; this is a limitation observed for smaller, semi-transparent PNGs or when strict clipping isn’t enforced. [Ref [iOS] Adaptive card not rendering in mobile #7929, Adaptive Cards not shown on Mobile Teams App #11407]
• PC/Web: Renders correctly, as you’ve observed.

Workarounds:

• Use non-transparent, fully opaque images for testing. If overlap persists on iOS, this confirms a clipping issue.
• Try applying a visible border or padding to the TableCells to make overlaps visually distinct and easier to report.
• Consider using Container with style and bleed properties instead of images for backgrounds if you need solid colors.

Status: The SDK/host handlers for iOS/Android are not clipping TableCell backgrounds as per spec; this is a platform renderer inconsistency. No user-side fix is available—report this to Adaptive Cards GitHub with your full repro.

References:

• GitHub #4555 (iOS Image stretch)
• GitHub #7929 (Image handling in iOS)
• AdaptiveCards issue tracker

Sorry for the inconvenience—this needs renderer-level correction in future SDK updates.

✨We'd love your feedback! Please take a moment to fill out our survey.

---

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!

[sayali-MSFT]

Hello @MamoruKuroda ,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[sayali-MSFT]

Hello @MamoruKuroda ,
Thank you for your patience! We were able to reproduce the issue in the [Mobile (Android)] Teams version [1416/1.0.0.2025204802].
IOS Teams Version-[7.21.77.2025212902/1125] We have reported this as a bug for further investigation.

We will keep you updated as soon as we receive further information. Thank you for bringing this to our attention!