Using border radius in a Browser Source leaves behind a light gray artifact

Zaytri

Zaytri

New Member
Whenever I use a browser source with a transparent background with elements that have a border radius, there's a light gray artifact of the curve.

You can see that here:

1698448124023.png


To reproduce this, create an HTML file with this code, and add it to a browser source as local file:
HTML: 
<!DOCTYPE html>
<html lang="en">
  <body style="font-size: 24px">
    <div
      style="
        background-color: #fef9e0;
        border-radius: 20px;
        margin: 10px;
        padding: 10px;
      "
    >
      border-radius: 20px;
    </div>
    <div
      style="
        background-color: #fef9e0;
        border-radius: 999px;
        margin: 10px;
        padding: 10px;
      "
    >
      border-radius: 999px;
    </div>
    <div
      style="
        background-color: #fef9e0;
        border-radius: 5px;
        margin: 10px;
        padding: 10px;
      "
    >
      border-radius: 5px;
    </div>
  </body>
</html>

And then add an image source of a white box underneath that browser source.

This only happens if the browser source background is transparent. If the brower source's custom CSS is changed to make the background color white:
CSS: 
body { background-color: white; margin: 0px auto; overflow: hidden; }
Then it renders find without issue.

The problem is I do want it to be transparent so it can be overlaid on top of other sources, such as if the browser source was a custom chat box overlay and I had a separate source for the chat box background, like this:

1698448766271.png


Is there anything I can do to prevent the light gray artifact from appearing, or is it a bug in the OBS Browser Source itself?
 
You must log in or register to reply here.
Top