search

creativetimofficial / ct-material-kit-pro

Premium Bootstrap 4 UI Kit based on Google's Material Design
https://www.creative-tim.com/product/material-kit-pro
128 stars 36 forks source link

Chrome 107 breaks secondary button hover #184

Open itsthejoker opened 2 years ago

itsthejoker commented 2 years ago

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. image

Solution

Additional comments

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

groovemen commented 2 years ago

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-lgclass 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