css filter effects?

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

css filter effects?

Postby sdiverdi » Mon Aug 30, 2021 6:39 pm

I just noticed that css filter effects such as blur and drop-shadow aren't being applied in my html in CEF. Is there something like a command line option I need to add to enable them? Or any idea why they wouldn't be appearing? I've searched around but not found mention of this before. I am running with disable-gpu-shader-disk-cache and disable-gpu-compositing but have tried removing both of those and no difference.
sdiverdi
Mentor
 
Posts: 51
Joined: Fri Dec 25, 2020 7:41 pm

Re: css filter effects?

Postby magreenblatt » Mon Aug 30, 2021 7:54 pm

Example URL? What OS and CEF version? Are you using windowed or off-screen rendering? Do they work in Google Chrome at the same version?
magreenblatt
Site Admin
 
Posts: 12383
Joined: Fri May 29, 2009 6:57 pm

Re: css filter effects?

Postby sdiverdi » Mon Aug 30, 2021 11:41 pm

I guess not an easy answer, eh? Too bad. :-) I've looked into it a bit more and found that the behavior depends on specifically applying the filter drop-shadow style to an svg rect, instead of the svg itself. See the following test html:

Code: Select all
<html>
<head>
<style>
* {
   overflow:  visible;
   position:  absolute;
}
.shadow {
   filter: drop-shadow(10px 10px 10px red);
}
#rect1 {
   x: 50px;
   y: 50px;
   width: 100px;
   height: 100px;
   color: black;
}
#rect2 {
   x: 250px;
   y: 50px;
   width: 100px;
   height: 100px;
   color: black;
}
</style>
</head>
<body>
<svg><rect id="rect1" class="shadow"></rect></svg>
<svg class="shadow"><rect id="rect2"></rect></svg>
</body>
</html>

In the attached image, you can see the results, on the left is the latest Chrome, on the right is in my app. I'm on mac 10.15.7, xcode 12.4. I'm using CEF build 4324, and my app is using offscreen rendering. I tested with cefclient from build 4472 and it looks fine, same as Chrome (left) in the attached image. I'm not sure how to easily test if the problem is OSR or build 4324.
Attachments
Screen Shot 2021-08-30 at 9.36.10 PM.png
Screen Shot 2021-08-30 at 9.36.10 PM.png (113.41 KiB) Viewed 3057 times
sdiverdi
Mentor
 
Posts: 51
Joined: Fri Dec 25, 2020 7:41 pm

Re: css filter effects?

Postby magreenblatt » Tue Aug 31, 2021 8:22 am

I'm using CEF build 4324, and my app is using offscreen rendering. I tested with cefclient from build 4472 and it looks fine, same as Chrome

cefclient has a flag --off-screen-rendering-enabled. If it works in newer CEF versions then I suggest you upgrade.
magreenblatt
Site Admin
 
Posts: 12383
Joined: Fri May 29, 2009 6:57 pm

Re: css filter effects?

Postby sdiverdi » Tue Aug 31, 2021 3:01 pm

Okay yep looks like it works with OSR in cefclient build 4472, so time to upgrade!
sdiverdi
Mentor
 
Posts: 51
Joined: Fri Dec 25, 2020 7:41 pm

Re: css filter effects?

Postby sdiverdi » Wed Sep 01, 2021 12:11 pm

Good news, upgrading fixed it. Thanks!
sdiverdi
Mentor
 
Posts: 51
Joined: Fri Dec 25, 2020 7:41 pm


Return to Support Forum

Who is online

Users browsing this forum: No registered users and 41 guests