[JavaScript][Mac] Chrome on Mac magically apply gradient white background on button when we say solid white

Platform

• JavaScript

Author or host

Host. We are Web Chat 🌐💬.

Version of SDK

Web Chat 4.5.2 uses Adaptive Cards 1.2.0.

Details

Related to https://github.com/microsoft/BotFramework-WebChat/issues/2365.

In Chrome on Mac (yap, very specific). We observed that all buttons on the Adaptive Card have gradient background color.

We checked it was styled properly with background-color set to White. I think this is a very specific problem to Chrome.

If you set the background-color to #FEFEFE, it become solid off-white. But if you set it to #FFF, it become gradient. And if you set border-style to dashed, it is solid white again. But if you set border-style to solid, it become gradient again. 🙄

So, I believe Adaptive Cards need to set appearance: none to prevent Chrome on Mac to style it.

To try this out real quick, please do the following:

1. On a Mac with Chrome 76 (it repro on 72 before we upgraded to 76)
2. Navigate to https://compulim.github.io/webchat-loader
3. On the “Secret” field, click on “MockBot” below
4. Click “Open Web Chat in a new window”
5. After Web Chat is loaded, type card breakfast, help, or herocard

Then, play with the <kbd>F12</kbd> and try fiddling background-color and border-style. 😉

[dclaux]

Eventually we’ll get the AC CSS stylesheet properly documented, but I can’t promise when.

[jonmill]

Closing this issue as a workaround has been identified and our css styles have been documented