[Web Dev] Unwanted box-shadows appearing on buttons

,
1

I have been developing a web application using Angular 16 and the Web SDK version 1019 and I am encountering a problem whereby some of my buttons are displaying unwanted box shadow effects. I say “some” because most are not having this problem.

Unaffected button
image

Affected button
image

As possible solutions, I have tried to remove any box-shadow effects setting box-shadow: none
in both my component’s stylesheet and the global stylesheet.

I then tried adding the !important modifier to the attribute value in both local and global stylesheet, but neither solution worked. Then I tried to remove all transitions or animations by default in styles.less but it is still not working.

    transition: none !important;
    animation: none !important;
    box-shadow: none !important;                
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;

When I inspected one of the problematic buttons using DevTools I could not find any problematic styling applied to it compared to the unaffected button.

Unaffected button
image

Affected button

image
image577×634 25.1 KB

2

Hi @luclib,

with the limited information you’ve provided it is hard to support you with this.

Please provide a minimal sample (angular project based on Web SDK with the two buttons) to reproduce this and push this into e.g. GitHub repository.

Regards,
Tristan