When using Mobile Safari (iOS) on iPads and iPhones or Chrome Mobile on Android devices, when you touch a button or hyperlink, it will trigger the “hover” state. If you have a CSS declaration that targets this pseudo class, this style may be active or visible if you tap the button/hyperlink and then tap the Back button in the browser. This is most likely not the desired state that you are looking for especially if your :hover declaration was intended for desktop browsers only. The reason why this happens is because when you tap on the back button, a request to the server is not sent, therefore the page that is in the cache gets reloaded along with the unintended hover state applied to your button or hyperlink.

Below is the sample HTML and CSS:

HTML

<a href="#" id="button">Button 1</a>

CSS

a {
   display: inline-block;
   width: 200px;
   font-size: 1em;
   font-weight: bold;
   border-radius: 5px;
   text-align: center;
   margin-bottom: 25px;
   line-height: 2em;
   text-decoration: none;
}

a:link,
a:no-touch:hover {
   background-color: green;
   color: white;
}

a:hover {
   background-color: white;
   color: green;
   border: 1px solid green;
}

Here are our buttons in the linked and hover states, respectively.

When tapping on the Back button on a mobile browser, the button with white background with green font would be active and not the button with green background and white font.

Solution

To fix this you can set up a script to detect the device using the ID of the button and the userAgent.match function, by passing Android, iPhone, or iPad arguments as seen below.

JavaScript

<script>
   var userAgent = window.navigator.userAgent;

   if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent(/Android/i)) {
      var button1 = document.getElementByID("button");

      button1.className += " no-touch";
   }    
</script>

This script adds a “no-touch” class to the className property of the anchor tag, which will then render as if the button is in it’s “linked” state. For more information on how to check User Agents for Mobile/Tablet, visit this post on stackoverflow, JavaScript how to check User Agent for Mobile/Tablet.