'Why is my Div transition not resetting on mobile

I have set up a div to move up from outside the bottom of the page when hovered over. This works fine in firefox "responsive design mode", when i try it on Android (firefox and chrome). The div transitions up on finger over and fails to return to its original state.

<!DOCTYPE html>
<html>

<head>
  <title>Swipe Gesture - Gallery</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" />
  <style>
    * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: sans-serif;
    }
    
    .gallery {
      width: 100vw;
      height: 100vh;
      background: #3A3;
    }
    
    #backButton {
      position: fixed;
      right: 35%;
      bottom: -30px;
      width: 30%;
      height: ;
      background: hsla(80, 90%, 40%, 0.2);
      color: white;
      margin: 0 0 0 0;
      padding: 20px 0 10px 0;
      text-align: center;
      -webkit-transition: 0.5s;
      border: solid hsla(80, 90%, 40%, 0.5);
      border-right: none;
      box-shadow: 0 1px 3px black;
      border-radius: 10px 10px 0 0;
    }
    
    #backButton:hover {
      bottom: 0;
    }
  </style>
</head>

<body>
  <div class="gallery"></div>
  <div id="backButton">Home</div>
</body>

</html>

Blockquote

htmlcssgoogle-chromefirefox


Solution 1:[1]

Try to add :focus also

#backButton:hover, #backButton:focus{
  bottom: 0;
}

If this still not working try to set cursor: pointer to the button.

Solution 2:[2]

On Android, the :hover event is actually a :focus event. Once you click on, it remains focused until you tap outside if it (on a different element).

Use :active instead, if you want to make it work on an android. but, before that add a media query to your css.

example:

    @media only screen and (max-device-width: 480px) {
       #backButton:active{
       bottom: 0;
    }

    @media only screen and (min-device-width: 480px) {
       #backButton:hover{
       bottom: 0;
    }

note: requires long click on the div

hope that helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Caio Salvador
Solution 2

Related Questions