Unsolved border-radius disappears during animation
-
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
andoverflow: hidden
. When animating the child element to create a zoom effect usingtransform: 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/WNbxKboHardware:
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 MBBug gif:
https://imgur.com/a/QYYzf9oLooking forward to hearing from the community as I am at a loss for what to try next.
Thank you.