Window transparency has "halo" artifact

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.

Window transparency has "halo" artifact

Postby marquedej » Mon Sep 14, 2015 7:56 pm

Hi,

I've got a cef window and I'm doing off-screen rendering.

I'd like parts of the window to be completely transparent -- to the desktop/background.

As long as the objects on the page are square/rectangular, the transparency works as expected.

However, with any rounded edges, there is a "halo" consisting of whatever color I've designated as the transparency color.

I have attached a couple of screen shots:

Halo:
Non_Transparent_Color_Background.png
My window over a background that is *not* the transparency color. Note the "yellow halo" around the circle on the left. And the text is *not* legible.
Non_Transparent_Color_Background.png (7.43 KiB) Viewed 8289 times


No-Halo:
Transparent_Color_Background.png
My window over a background that *is* the transparency color. Note the circle on the left is painted correctly. And the text is legible.
Transparent_Color_Background.png (7.12 KiB) Viewed 8289 times


The html for this display is:
(Note: the transparency color is: #ff0)

Code: Select all
<html>
<body>
<div>
    <div style="float:left;width:40%;padding:10px;background:#ff0;margin:5px">
        <p>Transparent Div</p>
        <div style="width:100px;height:100px;background:#f00;border-radius:50px;border: 1px solid #f00;margin:5px;"></div>
        <div style="width:100px;height:100px;background:#f00;border: 1px solid #f00;margin:5px;"></div>
    </div>
    <div style="background:#fff;float:right;width:50%;padding:10px;margin:5px;">
        <p>Opaque Div</p>
        <div style="width:100px;height:100px;border-radius:50px;background:#f00;border:1px solid #f00;margin:5px;"></div>
        <div style="width:100px;height:100px;background:#f00;border: 1px solid #f00;margin:5px;"></div>
    </div>
</div>
</body>
</html>


Is this something I'm doing wrong?
How do I ensure the "halo" artifact does not appear on non-rectangular elements when drawn on a transparent background?
Note: the same issue occurs with <img> images.

Thanks,

-- Mark
marquedej
Techie
 
Posts: 23
Joined: Wed Dec 04, 2013 7:51 pm

Re: Window transparency has "halo" artifact

Postby magreenblatt » Tue Sep 15, 2015 3:39 am

What OS and CEF version? Does the problem reproduce in cefclient with `--off-screen-rendering-enabled --transparent-painting-enabled`?
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Window transparency has "halo" artifact

Postby MartinM » Tue Sep 15, 2015 8:12 am

This looks like an antialiasing problem. The color of your non-straight edge is blended with the background color (here yellow).

When I take your first picture and use a color picker to get the color of one of the yellow pixels at the edge I get #feee00 (and not #ff0). You see? This is different from your color key. That's why it is not transparent.

A color key can only be one color. So antialiased edges will not work.
MartinM
Techie
 
Posts: 25
Joined: Wed Nov 07, 2012 5:21 am

Re: Window transparency has "halo" artifact

Postby marquedej » Tue Sep 15, 2015 11:42 am

magreenblatt wrote:What OS and CEF version? Does the problem reproduce in cefclient with `--off-screen-rendering-enabled --transparent-painting-enabled`?


This app has been built using the 32-bit version of CEF 3.1750.1738 and is running on Win 8.1/x64.

I will check it out with cefclient.

Thanks,

-- Mark
marquedej
Techie
 
Posts: 23
Joined: Wed Dec 04, 2013 7:51 pm

Re: Window transparency has "halo" artifact

Postby magreenblatt » Tue Sep 15, 2015 11:55 am

As Martin pointed out you should use alpha transparency instead of substituting a color.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Window transparency has "halo" artifact

Postby marquedej » Tue Sep 15, 2015 12:38 pm

Thanks for the responses!

Is there a way in cefclient to make the <html> and/or <body> elements transparent -- so that the desktop (or other windows) can be seen through the transparency area?

I tried changing the "opacity:" style in both <html> and <body> elements, but the background gradient is what is shown.

Thanks,

-- Mark
marquedej
Techie
 
Posts: 23
Joined: Wed Dec 04, 2013 7:51 pm

Re: Window transparency has "halo" artifact

Postby magreenblatt » Tue Sep 15, 2015 12:56 pm

The background gradient is rendered by cefclient in areas where the browser content is otherwise transparent. You would need a different implementation in your app to show other windows as the background.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Window transparency has "halo" artifact

Postby MartinM » Thu Sep 17, 2015 8:48 am

You might want to take a look at Windows with C++ - Layered Windows with Direct2D by Kenny Kerr.

Layered windows do provide the unique ability to compose a window on the desktop using per-pixel alpha blending, which cannot be achieved in any other way with the Windows SDK.


How to apply this to cef is another story. As far as I know layered windows should be kept small (for performance reasons).

Visual Studio 2013 and Word 2013 (or any other Office 2013 application) use separate layered windows for the window drop shadow at the sides of the main window.
MartinM
Techie
 
Posts: 25
Joined: Wed Nov 07, 2012 5:21 am

Re: Window transparency has "halo" artifact

Postby marquedej » Mon Sep 28, 2015 9:43 pm

Hi,

I've been doing some more research and I'm (still) puzzled. :-)

First of all, I have upgraded to CEF 3.2454.1323.g71c7271.

When doing off-screen rendering, the buffer I receive in "OnPaintBitmap(...)" has all the alpha-channel bytes set to "0xFF".

I do notice that the edges of curves are, indeed, anti-aliased -- but they are anti-aliased against my "transparent color" background.

Is there a "trick" to ensuring that the alpha-channel is enabled so that I can dispense completely with a color-key transparent color for the background?

Alternatively, is there a way to tell CEF what background image to render over so that the "transparent edges" are properly rendered and anti-aliased to look good.

Any help is appreciated as I'm working in an area that is definitely not my expertise. :-)

Thanks,

-- Mark

P.S. I tried to upload a screenshot, but got this error:
Code: Select all
Could not upload attachment to ./files/14765_dd08396190e99615b6beeb711bae1d02.
marquedej
Techie
 
Posts: 23
Joined: Wed Dec 04, 2013 7:51 pm

Re: Window transparency has "halo" artifact

Postby magreenblatt » Tue Sep 29, 2015 3:28 am

marquedej wrote:Is there a "trick" to ensuring that the alpha-channel is enabled so that I can dispense completely with a color-key transparent color for the background?

You need to set CefWindowInfo.transparent_painting_enabled to true and use HTML content that does not specify a background color.

marquedej wrote:P.S. I tried to upload a screenshot, but got this error:
Code: Select all
Could not upload attachment to ./files/14765_dd08396190e99615b6beeb711bae1d02.

Thanks, looking into it.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Next

Return to Support Forum

Who is online

Users browsing this forum: Google [Bot] and 27 guests