SX Design: Button left with hover state on iOS

[tbergquist-godaddy]

When the button is clicked on iOS, the button is left with the hover style until it loses focus.

See as a possible solution:

• https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
• https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

[mrtnzlml]

@tbergq Do you think that every :hover style should be wrapped in the media query like in the following example?

@media (hover: hover) {
  button:hover {
    border: 3px solid green;
  }
}

Is there any reason why we should not do it (automatically)?

[tbergquist-godaddy]

@tbergq Do you think that every :hover style should be wrapped in the media query like in the following example?

@media (hover: hover) {
  button:hover {
    border: 3px solid green;
  }
}

Is there any reason why we should not do it (automatically)?

No, I can't think of any reason not to do this automatically 😊

[mrtnzlml]

OK, thanks! I have it on the roadmap: #996

First, I need to do some changes to the SX core though to be able to improve and fix this.