border-radius disappears during animation

jmanhasquestions

Hello Everyone,

I have a Qt application that renders a webpage using QtWebEngine and I am running into a problem when animating transitions on an html component with border-radius.

The component has a child element (image) and a parent element (mask). The parent element has a border-radius and overflow: hidden. When animating the child element to create a zoom effect using transform: scale(), it ignores the border radius mask produced by the parent.

I have tested this on builds using Qt 5.13.2 (Chromium 73) and Qt 5.14.0-rc (Chromium 77). Both produce this same behaviour. When downloading the standalone Chromium 73/77 browser or any modern browser there is no such behaviour.

I have tried all kinds of css tricks with no luck (will-change, 3d transforms).
I have tried enabling hardware acceleration in Chromium with no luck (--enable-gpu-rasterization --ignore-gpu-blacklist --enable-oop-rasterization --force-gpu-rasterization --disable-features=FastBorderRadius).

Web page (see Change View > Debug View):
https://codepen.io/jmanhasquestions/pen/WNbxKbo

Hardware:
MacOS Catalina 10.15.1
MacBook Pro (15-inch, 2019)
2.3 GHz 8-Core Intel Core i9
Radeon Pro 560X 4 GB
Intel UHD Graphics 630 1536 MB

Bug gif:
https://imgur.com/a/QYYzf9o

Looking forward to hearing from the community as I am at a loss for what to try next.
Thank you.