[Rendering] When GridView shows cards with backgroundImage using url, sometimes there is black/random color showing

Target Platforms

UWP

SDK Version

3.0.2

Application Name

My own UWP app

Problem Description

I have an app running on Surface Go device. It has a GridView which hosts a bunch of adaptiveCards. Each card has backgroundImages with URL pointing to images on Azure.

The images on Azure is some pure color image. Here is an example.
https://neonstorage1.blob.core.windows.net/adaptivecardresources/FF1C76A3.png

It works well mostly on my PC. But on surface Go, sometimes the backgroundImage of some cards becomes black or a random color(not in the colors on Azure).

From my investigation, the json file being used to generate the card is fine. And when the issue happens, even I clear items from GridView, re-render the card and add them back to GridView, the cards' wrong color still remains. This is the part that confused me. I think even there is a random rendering issue on some cards, redoing everything should make some difference.

My guess is GridView is in the wrong state because of some URL&rendering issue.

A workaround is to use DataUri to keep the image data in the URL string. So I downgrade 3.0.2 to 3.0 because 3.0.2 doesn't support DataUri well (Reported in a separate issue).

Here is the screenshot when things working well.

Screenshots

No response

Card JSON

const string templateJson = @"
{
    ""type"": ""AdaptiveCard"",
    ""version"": ""1.5"",
    ""backgroundImage"": {
            ""url"": ""${BackgroundImageUrl}"", 
            ""fillMode"": ""repeat""
            },      
    ""body"": [
        {
            ""type"": ""Container"",                      
            ""verticalContentAlignment"": ""bottom"",     
            ""items"": [
                {
                    ""type"": ""Container"",
                    ""backgroundImage"": {
                        ""url"": ""${SecondaryBackgroundImageUrl}"",  
                        ""fillMode"": ""repeat""
                        },                    
                    ""items"":[
                        {
                        ""type"": ""TextBlock"",
                        ""text"": ""${Name}"",  
                        ""color"": ""light"",
                        ""size"": ""large"", 
                        ""wrap"": true, 
                        ""maxLines"": 2,
                        ""horizontalAlignment"": ""left""
                        }
                    ],
                    ""bleed"":true
                }
            ],
            ""height"":""stretch"",
            ""spacing"": ""none""
        }
    ],
    ""selectAction"": {
                ""type"": ""Action.OpenUrl"",
                ""url"": ""${Url}""
            },
    ""$schema"": ""http://adaptivecards.io/schemas/adaptive-card.json"",
    ""minHeight"": ""200px"",
    ""verticalContentAlignment"": ""top""
}";

Sample Code Language

No response

Sample Code

No response

Start by reproducing the Adaptive Cards 3.0.2 backgroundImage behavior on a Surface Go using the supplied Azure image URLs and card JSON. Compare initial rendering with clearing and re-adding the GridView items; done means URL-backed background images consistently retain their source colors without black or random-color artifacts.