4

enter image description here

Upon release of a button, one of the other buttons flickers on its :active styling. You can see in my gif that it seems to only happen when clicking the function and advanced divs. ( tapping on the design div seems to behave normally ).

Some backstory: This problem only arose after adding html{ position:fixed } to my CSS to fix this problem: iPhone viewport height too large in landscape mode

I was hoping for a CSS solution to this problem that doesn't reproduce my previous problem with the iphone viewport. But of course, Vanilla JavaScript is welcome.

This is happening on my Iphone 4S, running IOS7 and only when the phone is in landscape mode AND the Safari UI( The address bar and bottom toolbar ) are active. Only then, does this problem happen.

html, body{
  margin:0; padding:0; width:100%; height:100%; background:#fff; 
  font-family:Arial; overflow:hidden;
}
html{ position:fixed; }
p{ margin:0; padding:0; } nav{ height:100%; }

.vCenter{
  position:relative; top:50%; -webkit-transform:translateY( -50% );
  -ms-transform:translateY( -50% ); transform:translateY( -50% );
}
.option{
  margin:0; width:33.33%; height:100%; background:#transparent;
  text-align:center; text-transform:uppercase; font-size:110%; cursor:pointer;
  -webkit-touch-callout:none; -webkit-user-select:none; 
  -moz-user-select:none; -ms-user-select:none; user-select:none; float:left;
  
  -webkit-transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
  transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
}
.option:active, .option:hover{
  background:#0bb; color:#eee;
}

@media( min-height:299px ) and ( max-height:371px ){
  .option{
    width:100%; height:33.33%; box-sizing:border-box;
  }
  #function{
    border-bottom:none;
  }
}
@media( height:372px ){
  .option{
    width:100%; height:124px; box-sizing:border-box;
  }
  #function{
    border-bottom:1px solid #eee;
  }
}
@media( min-height:373px ) and ( max-height:568px ){
  .option{
    width:100%; height:33.4%; box-sizing:border-box;
  }
  #function{
    border-bottom:none;
  }
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8"><meta name="author" content="Lynel Hudson">
  <meta name="desciption" content="Front End Reference for Anyone">
  <title>WEB</title><link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="base.css">
</head>
<body ontouchstart="">
  <nav>
    <div id="design" class="option">
      <p class="vCenter">design</p>
    </div>
    <div id="function" class="option">
      <p class="vCenter">function</p>
    </div>
    
    <div id="rule"></div>
    
    <div id="advanced" class="option">
      <p class="vCenter">advanced</p>
    </div>
  </nav>
  <script>
  </script>
</body>
</html>

Link to page: http://www.lynelhudson.com/web/so/

Community
  • 1
  • 1
Lynel Hudson
  • 2,335
  • 1
  • 18
  • 34

1 Answers1

0

My guess would be you have an overlay issue. Which is causing the problem. 

 .option{
    width:100%; height:33.4%; box-sizing:border-box;
  }

You've declared these elements to overlap on another in this instance. Have you tried declaring 20% height just to make sure that you're not experiencing an overlap issue?

Also, I'm wondering why you chose html { position: fixed; } over simply stating the body to be 100% in height of the viewport and to then diallow scaling. This guarantee that it always stays 1 zoom and that your height is always 100%. You could add in a overflow: hidden; if paranoia sets in though. As you have it set now your intended design would still be wrecked upon browser setting or accidental zooming.

<meta name="viewport" content="width=device-width, user-scalable=no">
Brian Ellis
  • 2,271
  • 2
  • 17
  • 24