fix(thumbnail): replace hack for chrome rendering of wrongly dimensio…

[armasson]

General summary

This a quick and dirty replace, of a quick and dirty fix made to properly handle Thumbnails when it comes to render small avatars with unadapted size and ratio.

Origin of the issue

The issue is visible when using the Thumbnail in squared cover mode, when the image should fill the entirety of a it's placeholder (most often used with 64px an 32px size).

When the provided image is not squared and/or there is huge downsize from the original image size, Google Chrome sometimes has troubles displaying the image without pixelisation.

First fix

A first fix was introduced in this PR, that was adding a overflow-clip-margin: unset; in the component CSS code, forcing Chrome to properly render the image without pixelisation.

The idea behind this fix was to force Google Chrome to use a better algorithm when rendering the image, this is done by generating a new layer for the image with the CSS property, and then Chrome will deal with the image with a more advanced algorithms.

Second change

In this PR we've replace the first hack overflow-clip-margin: unset with a new one translate: 0 0 0.01px that does the same thing, by creating a new layer with the transformation made by translate. This was in introduced to remove a console log warning displayed when using the previous property.

The new issue

With the last fix, we've introduced a new issues, with the Thumbnail component. This is rare side effect that depend on the user browser, and screen resolution. But visible, when sometime, the thumbnails is used within a carousel that contains a Image rendered by the Thumbnail component. The next slide image is visible on the carousel current slide.

This is due to the translate property that make the image overflow it's slide.

The new fix

In order to fix this side effect, we've implemented a similar change, switching again the CSS property used to try backface-visibility: hidden that is a property that will do the same layer hack, but should not have side effects.

Screenshots

StoryBook: https://32a00fd4--5fbfb1d508c0520021560f10.chromatic.com/ (Chromatic build)

[armasson]

Non-regression test made on the deployed storybook.

Comparing with translate: 0 0 0.01px and backface-visibility: hidden to see if there was any difference in the rendering. Tested with the storybook images and some imported images from https://lumapps.atlassian.net/browse/SUP-4461

Fix also tested on lumapps-web, where the bug originated see: https://github.com/lumapps/lumapps-web/pull/14661 for more informations.

[gcornut]

Tested in product