Css, Safari :hover won't change button color

Question

It may be a dumb mistake but I cannot figure it. I have <button> with a :hover style to change his background and text colour. But while the background change the text never change on Safari.

.item .popup .buttons,
.items .popup .buttons {
  all: unset; /* I have a hughe CSS inherited with unrequired styles */
  display: block;
  text-align: right;
  padding: 12px;
}
.item .popup .buttons button,
.item .popup .buttons .button,
.items .popup .buttons button,
.items .popup .buttons .button {
  margin-left: 6px;
} 

.item .popup button,
.item .popup .button,
.items .popup button,
.items .popup .button {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  padding: 3px 6px;

  color: blue;
  background-color: white;
  border-color: blue;
}
.item .popup button:hover,
.item .popup .button:hover,
.items .popup button:hover,
.items .popup .button:hover {
  color: white;
  background-color: blue;
}

Edit Here is the required Html.

<section class="items">
  <div class="popup-overlay" ></div>
    <div class="popup">
        <h1 class="title" translate>A title</h1>
        <p class="content" translate>
            A bit of text
        </p>
        <div class="buttons">
            <button class="button" translate ng-click="onDeviceVerified(true)">
                Ok
            </button>
            <button class="button warning" translate ng-click="onDeviceVerified(false)">
                Cancel
            </button>
        </div>
    </div>
</section>

I created a codepen to reproduce the issue:

https://codepen.io/gervaisb/pen/ExVaxqZ

As you can see the text is still black when the mouse move over a button withing Safari.

I cannot understand what is the issue; why the button color never change while the background does. I have also added a border: 3px solid red on the :hover style and the border works too.

How can I make the button text color white (or any colour) when the mouse is over with Safari (and other browsers)?

Answer 1

Your problem comes from all:unset , which behaves weirdly on Safari when setting the color property. Use -webkit-text-fill-color instead.

Just add -webkit-text-fill-color: white as follows:

.item .popup button:hover,
.item .popup .button:hover,
.items .popup button:hover,
.items .popup .button:hover {
  background-color: blue;
  color: white;
  -webkit-text-fill-color: white;
}

See jsfiddle here: https://jsfiddle.net/2a6e8cb3/