Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Steven Ventimiglia
Steven Ventimiglia
27,412 Points
Posted by Steven Ventimiglia
Steven Ventimiglia
27,412 Points

Fixed Nav shifting down on the Android Lollipop browser used by HTC... suggestions?

I have a fixed nav that's top: 0; bottom: 0; left: 0 - and I've tried height: 100%, min-height: 100%, adding overflow values to the html, body and nav... this, that and the other thing. Viewport is defined, etc.

So I'm a perfectionist. I've noticed that no other mobile browser is affected, however, when this menu is loaded upon a page refresh, it creates the equal amount of space in a huge gap between top: 0 and the top of the screen. Then, when the browser menu slides away to hide itself, the nav goes back to how it's supposed to be in the first place.

So a sliding menu forces unwanted spacing in the layout and angers me.

I am now going to buy 24 donuts and a gallon of chocolate milk. Any attempt to assist me in avoiding future trips to the store will be greatly appreciated.

Ali M Malik
Ali M Malik
33,293 Points

From what you described it seems like the same problem with fixed positions in android browsers. But to be able to help you more, can you please share your code or maybe a screenshot to clarify the exact issue.

Thank you

Steven Ventimiglia
Steven Ventimiglia
27,412 Points
Steven Ventimiglia
Steven Ventimiglia
27,412 Points

Here's a super-simple example:

style.css 
html,
body {
  padding: 0;
  margin: 0;
}

nav {
  z-index: 850;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  background: #333;
}

.wrapper {
  background: #eee;
  padding: 40px;
}

.copy {
  width: 50%;
  color: #333;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 auto;
}
index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>The Evil Navigation</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <nav>&nbsp;</nav>
    <div class="wrapper">
      <div class="copy">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in imperdiet risus. Nam tincidunt, orci et placerat ultricies, sapien eros interdum dui, eu tempus nisl nisi sed ligula. Pellentesque urna lorem, viverra sed lacus nec, posuere mollis metus. Aliquam egestas ipsum libero, id auctor leo fringilla id. Pellentesque vel velit et tortor ultricies iaculis eu in tellus. Maecenas at facilisis est. Pellentesque nec tristique diam, ut finibus justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur felis diam, porttitor non porttitor at, fringilla ut sapien. Donec ut elit at dolor elementum eleifend. Aliquam ac tortor et nulla facilisis dapibus. Maecenas in diam quis urna condimentum fermentum. Ut aliquet faucibus condimentum.</p><p>Donec ut nulla turpis. Mauris vulputate purus eu nulla facilisis, quis convallis ante congue. Sed facilisis dolor nisl, vitae cursus sem congue fermentum. Donec congue orci et molestie pellentesque. Mauris pharetra mi et viverra semper. Nam quis lorem luctus, interdum magna sed, consectetur velit. Suspendisse convallis at lectus a sodales.</p><p>Sed convallis orci eu magna interdum porta. Pellentesque elit dolor, ornare at nisl sed, dapibus tempor orci. Phasellus et lorem dui. Vestibulum fermentum ut ex a blandit. Suspendisse ut facilisis est. Etiam at est nisl. Proin vitae accumsan eros. Proin dapibus urna et dictum placerat. Proin sed erat metus. Mauris nibh nisl, viverra eget mi eu, lobortis varius purus. Pellentesque quis tortor ex. Nullam ac dolor pulvinar, iaculis dui ac, finibus elit.</p><p>Proin accumsan sodales odio vitae gravida. Curabitur convallis magna tincidunt turpis pellentesque aliquet. Quisque vitae porta magna, non tincidunt est. Fusce vitae sodales neque. Nam blandit blandit aliquam. Nunc quis ipsum urna. Maecenas nibh augue, pellentesque id sapien eget, accumsan bibendum metus. In lacinia, nisl non pretium placerat, eros est ullamcorper lorem, non euismod nulla erat at leo. Cras nec neque laoreet lorem aliquam scelerisque.</p><p>Suspendisse bibendum, massa et interdum molestie, neque quam elementum dolor, at ultrices purus elit id sem. Nulla laoreet semper massa, quis ultrices dui facilisis in. Ut at mollis nulla. Vivamus eu sem enim. Cras euismod turpis eget est vulputate, nec facilisis justo elementum. Vestibulum luctus laoreet quam sit amet porta. Sed viverra ante justo, non consequat nibh accumsan ut. Praesent vitae tempus nibh, sit amet dignissim enim. Aliquam feugiat luctus tellus, et interdum dolor cursus ac. Nam sodales arcu id turpis imperdiet venenatis. Maecenas convallis gravida urna, sit amet viverra ipsum condimentum vel.</p><p>Nunc ac est eget velit vehicula tristique nec id velit. Vivamus eu sem euismod, fringilla eros at, pharetra eros. Donec in metus erat. Curabitur at lacus ipsum. Nullam dictum dictum erat vitae blandit. Suspendisse blandit magna ac lectus condimentum sodales. Integer sit amet tortor porttitor, sodales nunc eget, condimentum enim. Sed ultricies hendrerit magna, quis facilisis metus imperdiet vel. Nullam est ante, aliquam et aliquet a, rutrum a magna. Sed pharetra gravida dui, nec pulvinar risus vestibulum sed. Aliquam lobortis et nisl sit amet euismod. Sed faucibus viverra nisl vel congue. Phasellus bibendum turpis sed sagittis tincidunt.</p><p>Etiam convallis leo dolor, id malesuada nunc pretium vitae. Curabitur mattis sem porttitor ipsum hendrerit vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vitae mi enim. Vestibulum commodo odio a tortor scelerisque, tempor mattis elit convallis. Phasellus ornare nulla ex, sed congue justo ultricies eget. Ut et ipsum tristique, facilisis metus a, rhoncus diam. Phasellus ut ligula vel nibh molestie pulvinar sed vel lectus. Curabitur fringilla, nibh eget dictum interdum, lectus lacus gravida leo, id pulvinar quam lorem in eros. Curabitur condimentum suscipit nisl a accumsan. Donec ultricies auctor mi, quis pharetra velit.</p><p>Vivamus a dignissim sem. Nulla eu euismod libero, at volutpat risus. In porta molestie ligula, non porta est porttitor at. Aliquam ipsum sem, rhoncus a leo eget, commodo vestibulum justo. Donec semper justo eu vulputate posuere. Mauris fringilla at sem vitae lobortis. Maecenas mollis magna quis odio malesuada, ut congue nisl bibendum. Sed sit amet eros id nulla porttitor commodo. Nulla et pharetra nibh. Aliquam ultrices ipsum et pellentesque elementum.</p>
    </div>
  </body>
</html>

2 Answers

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

Hey Steven,

I tested your code in my android browser on my samsung galaxy note 4 running 4.4.4 and it's working fine. I don't have access to my lollipop device right now. The odd part is that this is a normal issue with older android browsers. I haven't seen it recently. at least not since honeycomb.

But try this

nav {
  z-index: 850;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  background: #333;
  -webkit-backface-visibility: hidden; 
}

The backface visibility has solved many quirks I've encountered with fixed positioning in android browsers.

Let me know if this works. Also if at all possible can you please add screenshots so I can see the gap. How big is it? and did you try remote inspection to see why is it being rendered that way?

hope this helps

Steven Ventimiglia
Steven Ventimiglia
27,412 Points
Steven Ventimiglia
Steven Ventimiglia
27,412 Points

Here, I made two quick comps and just realized that the nav was accidentally placed on the right side, but you'll get the point. The space is exactly the height of the menu that slides downward after scrolling a bit. In landscape mode, the menu is forced to the left or right of the layout, so it doesn't affect the nav like it does in portrait mode.

With Menu: http://i.imgur.com/drLkftx.png

Without Menu: http://i.imgur.com/iLvIsX1.png

I tried what you suggested and it was a no-go. It's more because I'm anal retentive to cross-browser/platform issues and this was bothering me. It's been tested on desktop and mobile with Safari, IE, Firefox and Chrome. It's also been tested in OS X (Yosemite), Windows 7-10, and Ubuntu. It looked fine.

I'm just gonna have to chalk this up to the growing pains of Android. It could be Lollipop, it could be an altered version of webkit from HTC, HTC Sense, HTC-OMFG, etc. It could also be some alternate universe issues, from watching Fringe or Sliders.

Time for more donuts and milk.