Discord widget white corners

Hello,
WordPress update fixed it.

Hello,
I found that the problem still persists, but it only occurs on Windows 11. (tested on Edge and Google Chrome.)
Does anyone have any idea how to fix it please?

Thank you for reply
Regards
RTV4

• This reply was modified 2 years, 10 months ago by rtv4.

Hello,
I found out that it doesn’t depend on the system, even users on win 10 can see these white parts, but only someone…
Does anyone please know what could be causing this and how to fix it?

Thank you for reply
Regards
RTV4

Hi there,

Does it also happen when you are not logged in to the backend?

Yes,
I’ve asked several users to send me a screenshot from my web.
Someone see it, someone didn’t.
Only I have an account.
And I’ve see it in Incognito mode, too.

• This reply was modified 2 years, 10 months ago by rtv4.
• This reply was modified 2 years, 10 months ago by rtv4.
• This reply was modified 2 years, 10 months ago by rtv4.

Right, I can say with great certainty that it has nothing to do with this theme. You can check with other themes as well, to make sure. I’d contact those who are providing that widget and send them screenshots plus the exact Web browser and OS name and versions.

I tried using a few other templates, but the bug only shows up on Pen theme,
I’m sending a screenshot of the “Twenty Fourteen” theme for demonstration: https://imgur.com/a/FNqiG2w
The white corners started to appear after some update of the Pen theme, but I don’t know after what, because I went back to managing site after a long time.
I don’t want to use any other theme, because the best one for me is Pen theme.
The widget provider probably can’t help me with this because I have no contact to their dev team.
I use Google Chrome version 97.0.4692.71
And I’m currently running Windows 11 Home version 21H2 Build 22000.376

Thank you for reply
Regards
RTV4

Hi there,

So you have checked with several themes and they all have had dark backgrounds behind the widget, and they all have displayed the corners without white pixels, all on the same Web browser, and only this theme does not show it correctly? That’d be weird!

This one in the screenshot, I’d say that’s because the widget is smaller and so happens to be easier to calculate semi-transparent pixels for anti-aliasing.

Anyway, since this is a whole separate page shown in an <iframe> it is not this theme that is creating that problem, it is your Web browser, and it is not this theme that can prevent the problem, it is those who are making that widget, that is Discord. You should write to them and send them the above information.

Here’s some more details, if you want to help them narrow it down quickly.

Check the answer here, please:
https://stackoverflow.com/questions/16938437/white-corner-showing-on-black-box-with-border-radius

Then, right click on the widget and select Inspect element, in the DevTools you can see the widget is inside an <iframe> and therefore displaying another webpage, from Discord itself, so this is nothing I can fix.

Right there, check the <div class="widgetHeader-2Hz_Ln"> element. It has that light purple background, but no border-radius, its container does though (the <div class="widget-szj0pM widget-theme-dark">) and it happens to have an overflow:hidden too! That’s important and that’s the root cause of this problem with some certain Web browser engines.

You should email Discord, send them the screenshots and the above version numbers, I’m sure they can fix it quickly.

PS: You can submit a support ticket here.
https://support.discord.com/hc/en-us/requests/new

Hello,
Thank you for your reply, I just got a bit lost in the last paragraph of your reply because I don’t know much CSS.

Okay, I’ll try to write to Discord support, I’ll post here how it went.

The error started showing up after some of the Pen theme updates, I tried this widget again.
I tried to run the code of this widget directly without WordPress and theme, and there this error does not occur, here I send a screenshot: https://imgur.com/a/gvdCYux

Hello,
I tried a few more experiments to find out which part of the code is causing this bug and I found that it is caused by some part of the CSS code, more precisely by removing this line:
“<link rel=’stylesheet’ id=’pen-css-css’ href=’https://GoodCraft.cz/wp-content/themes/pen/assets/css/pen-general.css?ver=1.4.4&#8242; type=’text/css’ media=’all’ />”
the bug stopped appearing, and after returning this line the bug started appearing again see screenshots here: https://imgur.com/a/CSRqMQD
Additionally, the bug started showing up after some update to the Pen theme, so I think the Discord widget is not fully compatible with your theme.

Do you know what could be changed in the CSS code to stop this bug?

Thank you for reply
Regards
RTV4

Hi there,

Right, it is however working fine over here and for some of your visitors too, so it’s more likely to be a bug in your Web browser and/or extensions.
You should either put that CSS file somewhere so you can edit it, or edit it live through DevTools, to see which part might be causing that, start with those prefixed properties, or the :root, it’s for those Dark Mode settings.

Hello,
I think I’ve found it. When I opened the devs tools, I got a couple of errors.
Could it be that?
I’m posting screenshots here: https://imgur.com/a/Kb0lxiH

Could you please help me fix it?
What should I do?

Thank you for reply
Regards
RTV4

The first screenshot: I meant to remove the CSS from that file (click the filename of that CSS code which looks like a link, on the right side) to see which part may make the problem go away.

The second screenshot: It belongs to that widget above the Discord widget, you should either replace the $ in its JavaScript code with jQuery or wrap the code like this:

(function($){
	$(document).ready(function() {
		/* That code goes here. */
	});			
}(jQuery));

Hello,
I’ve fixed the first error, thank you for your help.
For the second error, I found that it is caused by this:
:root {
color-scheme: light dark;
}
After removing this part the bug stopped showing, here I am posting screenshots: https://imgur.com/a/CnDSlAm
Do you know how to save this fix please?

Thank you for the reply
Regards
RTV4