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:
To reproduce this, create an HTML file with this code, and add it to a browser source as local file:
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:
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:
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 can see that here:
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; }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:
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?
