Status widget chat CSS issue on Chrome based browser

[PeopleInside]

1. I was able to reproduce the issue on my website and on live helper chat website.
2. I was also able to resolve the issue.

Opening https://livehelperchat.com/ from a Firefox browser show the live widget correctly:

Opening https://livehelperchat.com/ from a Chrome based browser (I tested with Edge) showed a bold widget that is too much illumined by a white light.

The issue is caused by the following CSS:

#lhc_status_container #status-icon {
background-color: #0c8fc4;
border: 2px solid #e3e3e3;
-webkit-border-radius: 47px;
-moz-border-radius: 47px;
border-radius: 47px;
-webkit-box-shadow: 0 0 17px rgba(50,50,50,0.5);
-moz-box-shadow: 0 0 17px rgba(50,50,50,0.5);
box-shadow: 0 0 17px rgba(50,50,50,0.5);
text-decoration: none;
height: 38px;
width: 38px;
font-weight: bold;
color: #FFF;
display: block;
padding: 12px;
font-size: 38px;
cursor: pointer;
}

If this CSS is removed or set as

#lhc_status_container #status-icon {
font-weight: initial !important;
}

the issue seems resolved.

Widget difference GIF:

[PeopleInside]

#lhc_status_container #status-icon {
font-weight: initial !important;
}

The following CSS affect also Firefox and don't create a great visual... because remove the light low effect on Firefox that is showed too much lighter on Chrome.

Maybe is better open a webcompact issue for report that the same components never work same on two different browser.
Closing this issue.

[PeopleInside]

A recent update remove the font-weight: bold; from #lhc_status_container #status-icon {
This has made because on Chrome the live helper chat icon is not showed very nicely but for this issue a Chrome investigation bug is open and is currently in the investigation status.

For now so the CSS to bold font-weight has been removed to avoid this kind of bug but, in the future, maybe when the Chrome bug will have a more details or fox, we may want reintroduce the nice effect that was working well in Firefox.

The CSS removal for Chrome has effect also for Firefox and all browsers.
Below just an animation on how is the difference in Firefox if the removed CSS is present or not.
Just a reminder for the future to maybe reintroduce this when Chrome will have a fix.