Div bottom toolbar appearing on iPhone but not on Android

Question

I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?

Here is the code:

<div class="col-sm-2">
 <div class="sidebar-nav-right">
  <div class="navbar navbar-default navbar-style" role="navigation">
   <div class="nav">';
    <a class="brand font-26 block brand-color">Tools</a>
     <ul class="nav navbar-nav center">
     <li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
     <li><a href="javascript:;" class = "font-16">Item 2</a></li>
     <li><a href="javascript:;" class = "font-16">Item 3</a></li>
     </ul>
   </div>
  </div>
 </div>
</div>

.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}

This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.

Answer 1

If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.

Answer 2

this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.

There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/

Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb

Answer 3

I think @GoreWang's comment is spot on. You should try the following 2 things:

(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:

.sidebar-nav-right { 
  left: 0;
}

(2) Add following code to your fixed element:

 .sidebar-nav-right { 
   transform: translateZ(0);
   -webkit-transform: translateZ(0); 
} 

This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)