Viva Connections - Multiple issue with images in Microsoft Teams

[StfBauer]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

other (enter in the "Additional environment details" area below)

Developer environment

macOS

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [X] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

Microsoft Teams Client

Describe the bug / error

Viva Connections Dashboard on a Desktop Computer looks like this:

All images on this Dashboard are SVG Graphics and load perfectly fine. In MS Teams on a mobile device they look like this:

The SVG graphics fail to load, while the image that is loading has a huge distortion in Teams. It seems like the desktop styling does not apply in Teams.

Steps to reproduce

1. Create a card using Adaptive Card designer or SPFx

2. Add SVG graphic as an image

3. Create a card using Adaptive Card Designer or SPFx

4. Add image that is larger then the image placeholder - Resize on Desktop works fine but not in Teams client.

Expected behavior

Images should load correctly as well as size correctly.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[anoopt]

Adding a similar issue.

[StfBauer]

@anoopt Thanx. This case happens even with the out of the box web parts. None of those load SVG images + other images is CSS wise broken.

[frags51]

Hi @StfBauer -

1. On mobile, SVG images are only supported in the card icon, not in the card image. We are working on enabling support. Please expect an update in April.
2. Kindly use smaller size images (< 400px x 400px ) and with 1:1 aspect ratio as documented here. This will prevent aspect ratio distortion on mobile. However, we are working to ensure that larger images also do not get distorted. Please expect an update by April end.

[StfBauer]

@frags51 Thank you for the update.

1.) Happy to get the support ASAP. Thank you for your effort. 2020 where everything is all about SVG this is not a great user story to have forgotten about this support. Will then Level 2 Cards also be able to load SVG images?

2.) Then the documentation and implementation are wrong since those cards do not use a 1:1 ratio at all. On Desktop the images are 164x180, which translates on Mobile to a 507px x by 516px. While on other screen resolutions it also has 186px by 180px - Desktop small screen. Either the implementation or the documentation is wrong.

[frags51]

@StfBauer

1. SVG images are supported on level 2 cards, but they may not work with height/width specified as 'auto'. You would need to provide either the size or the height and width for it to work. The AC platform does not support SVG images as mentioned in the docs, but we are working on providing a consistent SVG experience. Thanks for the feedback!
2. Thanks for pointing out the 1:1 part - I will check that out. Could you please explain the point about mobile resolution being 507x516? On all of the platforms we have tested, the image which gets rendered is < 400x400 pixels. While we are working to ensure that larger images are not distorted, kindly use an image with both dimensions < 400 pixels. Screenshot from mobile using 321 x 359 image, it is working correctly:

[StfBauer]

1.) SVG height and width properties can be battled using aspect-ratio or object-fit. The way the cards are currently implemented has some CSS issues, which exactly cause troubles with the distortion. There are some positions: absolute definitions, which are not required.

2.) Not sure how you tested it but I think your testing is wrong. Took out the measurements from a 1:1 screenshot in an iPhone 13 Pro. Which is also a 1:1 representation of the design. So scaling not downsampling. My guess is you tested it in the browser teams app on Microsoft Edge or Chrome. Those browser engines are not available on an iPhone. You only are allowed to use the WebKit engine, not the chromium.

In order to test it properly, you have to use real devices. So while you can simulate how the dimensions of a browser work on an iPhone with the developer tool, you can not test what the actually rendering looks like. In there you would only see how Edge/Chrome renders it, which is not the engine picked up on iOS.

[anoopt]

To add to Stefan's point on testing on mobile devices, if helpful, we can use the spfx-fast-serve's ngrok plugin to see results instantly on a mobile device.

[frags51]

@StfBauer My bad - I was talking about different units (dp) and not pixels. I have tested and pasted the above screenshot from Viva Connections app on an iOS device. However, if the image dimensions are more than 400 pixels, SharePoint compresses them to a lower resolution (<= 400 pixels in the highest dimension). Due to an issue in this process, we see a slightly aspect-ratio wise distorted image as you pasted in your screenshot:

Please try this case out after reducing the image resolution to < 400 pixels as a workaround until we fix the compression logic. Let me know if it works.

Thanks!

[StfBauer]

That's fine for now but it's a bit strange that in any case mobile and desktop "should" have a 1:1 ratio but do not have because of the current implementation.

So for resizing it doesn't have to be super smart because you know the target resolution, you know that the image is portrait or landscape and this is enough information to reduce the size of the file to match right in the frame. Pretty common web development workflow and I wouldn't resize it to be squared when you have to leave it portrait or landscape and make it object-fit.

Also, keep in mind that maybe picture look add then a 300x300 pixel is rendered at 216px/inch instead of 72px/inch

Another thing I just recognised is that the drop shadow gets dropped on the image. So you only have it on the left part, which also kinda looks odd. Again here is a screenshot of a real device.

[frags51]

@StfBauer

That's fine for now but it's a bit strange that in any case mobile and desktop "should" have a 1:1 ratio but do not have because of the current implementation.

Thanks for this feedback - we will have a look at the 1:1 (we might need to correct our docs). What I was trying to say is that for now please use an image with dimensions lower than 400px (no need to enforce the 1:1 aspect ratio), due to an issue with image compresion on our side (and not with resize/object-fit). From your latest screenshot, it appears that this is working for you (and you no longer see a distorted image as mentioned in the screenshot in issue description).

Another thing I just recognised is that the drop shadow gets dropped on the image. So you only have it on the left part, which also kinda looks odd. Again here is a screenshot of a real device.

Could you please elaborate more on this - or maybe please create a separate issue for this.

Thanks!

[lucabandMSFT]

hey @StfBauer, feel free to elaborate more here on what @frags51 mentioned or close this issue and open a new one. Thanks

[StfBauer]

Thanks, @lucabandMSFT, @frags51 - I found out what it is. It is a "design quirks" aka optical illusion. Not sure how to say it better.

Example 1:

White (left) against the box-shadow makes a hard contrast therefore the box-shadow looks darker than it is. Solid color - The box-shadow looks lighter and on normal view, it looks like there is a cut off 1 px so the image appears to be smaller than the rest of the card.

Example 2:

Box-shadow against white it looks like it is there. Box-shadow against anything else or in this case SharePoint Teal, the box-shadow disappears. Since there is no hard border between content, e.g. a 1px white line. The box-shadow - looks like it vanished and come back again.

I checked it in Photoshop and the color (#d7d7d7) that the box-shadow show is the same across the whole length.

Also could just be me who recognises this. So all is good for now.

[lucabandMSFT]

thanks @StfBauer for reaching out. I'm going to close this one then.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues