Chrome 107 breaks secondary button hover

[itsthejoker]

Version

3.0.3 (latest)

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/buttons/material-kit

Operating System

Mac / Win

Device

MBP / Windows Desktop

Browser & Version

Chrome 107

Steps to reproduce

Load the docs page on Firefox or Chrome 106 and see that the secondary buttons appear correct.
Load the docs page in Chrome 107 and see that the secondary button now has a green hover effect around it.

What is expected?

The secondary button should have the gray hover outline around it.

What is actually happening?

The secondary button has a bold green hover outline around it.

---

Solution

Additional comments

This is a brand new change related to a browser release.

[groovemen]

Hello @itsthejoker,

Thank you for using our products, from the browser's last version update, the first value from the box-shadow property isn't working anymore. We'll search for a solution but until then, you can use the .shadow-lg class for the secondary buttons. We're sorry for this inconvenience.

box-shadow: 0 3px 3px 0 rgba( , 128, 154, .15), 
            0 3px 1px -2px rgba( , 128, 154, .2),  
            0 1px 5px 0 rgba( , 128, 154, .15);

Hope this information helps you. Please let us know if we can help you with anything else.

All the best,
Stefan