Absolute Positioning Within CSS Table Cell Not Behaving Properly on Ipad and Iphone Browsers

HTML & CSS
1

When the following page is viewed on desktop the text / menu is at the bottom of the yellow box. However, on iphone and ipads in safari and chrome the text /menu is in the center of the page. Does anyone know the reason for this sparadic behavior and the fix for it?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Category Header</title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style type="text/css">

html,body {
  margin: 0;
  padding: 0;
}

.category-header {
  /*overflow: hidden;*/
}

.category-header-inner {
  display: table;
  /*width: 200%;*/
  width: 100%;
  height: 100%;
}

.category-header-row {
  display: table-row;
  height: 100%;
}

.category-header-row:before {
  content: " ";
  display: table-cell;
  width: 33.3%;
  background-color: blue;
  height: 100%;
}

.category-header-title {
  display: table-cell;
  /*width: 50%;*/
  
  vertical-align: middle;
  
  /*float: left;*/
  width: 33.3%;
  height: 100%;
  /*margin-left: 33.3%;*/
  
  background-color: red;
}

.category-header-nav {
  display: table-cell;
  /*width: 50%;*/
  
  width: 33.3%;
  height: 100%;
  vertical-align: middle;
  
  background-color: yellow;
}

nav {
  overflow: hidden;
}

nav ul {
  float: left;
  margin: 0;
  padding: 0;
}

nav ul li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav ul ~ ul {
  margin-left: 1em;
}

.category-header-title .reveal,
.category-header-nav .hide {
    position: absolute;
    display: none;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 15px;
    margin-top: -8px;
    line-height: 16px;
    border: 1px solid #2f3034;
    font-size: small;
    text-align: center;
    text-decoration: none;
    color: #2f3034;
    border-radius: 16px;
}

.category-header-nav .hide {
  left: 16px;
}

h2 {
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
}

.category-header-title:before,
.category-header-title:after {
  content: " ";
  display: block;
  height: 16px;
}





body.mobile .category-header {
  position: relative;
}

body.mobile .category-header-inner {
  width: 200%;
}

body.mobile .category-header-row:before {
  display: none;
}

body.mobile .category-header-title {
  width: 50%;
  position: relative;
}

body.mobile .category-header-nav {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  /*visibility: hidden;*/
}

body.mobile .category-header-title .reveal,
body.mobile .category-header-nav .hide {
  display: block;
}

body.mobile nav ul:first-child {
  margin-left: 50px;
}

body.mobile .category-header-nav-inner {
    position: relative;
    top: 50%;
    /*transform: translate(0,-50%);*/
}

</style>
  
</head>
<body class="mobile">

<div class="category-header">
  <div class="category-header-inner">
    <div class="category-header-row">
    
      <div class="category-header-title">
        <h2><span>Category</span></h2><a href="#category-menu-in" class="reveal">&thinsp;<i class="fa fa-angle-right"></i></a>
      </div>
        
      <div class="category-header-nav">
        <div class="category-header-nav-inner">
        
          <a href="#category-menu-out" class="hide">&thinsp;<i class="fa fa-angle-right"></i></a>
          <nav class="category-menu">
            <ul class="menu">
              <li class="first leaf"><a href="#">Blah1</a></li>
              <li class="leaf"><a href="#">Blah2</a></li>
              <!-- <li class="leaf"><a href="#">Bicycles</a></li> -->
            </ul>
            <ul class="menu">
              <li class="leaf"><a href="#">Blah3</a></li>
              <li class="leaf"><a href="#">Blah4</a></li>
              <!-- <li class="last leaf"><a href="#">Curated</a></li> -->
            </ul>
          </nav>
          
        </div>
      </div>
      
    </div>  
  </div>
</div>

</body>
</html>

I should also note that this behavior only occurs on the physical devices – not emulators like the built in chrome one.

2

does the css file have media queries?

3

That has nothing to do with the question at hand. Mobile/tablet presentation is being emulated using a class on the body to keep this as simple as possible considering it is part of a much larger project. I’m just trying to isolate the problem to something people can understand without everything else that would come into play.

4

Well Ive viewed the file at 300px width and theres no text movement. Cant see why there would be on a phone/tablet if there’re no media queries. If you cant find a fix for the problem, perhaps a 1 off css media query would help.

5

Did you view the file on a physical ipad and iphone or an emulator? On emulators specifically the chrome emulation mode everything is working fine. On the physical devices though the text is located in the very center of the browser window.

6

I decided to take a different route and scape CSS tables when viewing on mobile which seems to work out best.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Category Header</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style type="text/css">

html,body {
  margin: 0;
  padding: 0;
}

.category-header {
  position: relative;
}

.category-header-inner {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.category-header-row {
  display: block;
  width: 200%;
}

.category-header-row:before {
    content: " ";
    display: none;
    width: 33.3%;
    background-color: blue;
}

.category-header-title {
  display: block;
  width: 50%;
  background-color: red;
}

.category-header-title:before,
.category-header-title:after {
  content: " ";
  display: block;
  height: 16px;
}

.category-header-nav {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 100%;
  background-color: yellow;
}

.category-header-title .reveal,
.category-header-nav .hide {
  display: block;
}

nav ul:first-child {
  margin-left: 50px;
}

.category-header-nav-inner {
    display: table;
    height: 100%;
    
}

.category-menu {
  display: table-cell;
  vertical-align: middle;
}

nav {
  overflow: hidden;
}

nav ul {
  float: left;
  margin: 0;
  padding: 0;
}

nav ul li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav ul ~ ul {
  margin-left: 1em;
}

.category-header-title .reveal,
.category-header-nav .hide {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 15px;
    margin-top: -8px;
    line-height: 16px;
    border: 1px solid #2f3034;
    font-size: small;
    text-align: center;
    text-decoration: none;
    color: #2f3034;
    border-radius: 16px;
}

.category-header-nav .hide {
  left: 16px;
}

h2 {
  font-size: 2em;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media (min-width: 800px) {

  .category-header {
    position: static;
  }

  .category-header-inner {
    display: table;
    position: static;
    width: 100%;
    overflow: auto;
  }
  
  .category-header-row {
    display: table-row;
    width: auto;
  }
  
  .category-header-row:before {
    display: table-cell;
  }
  
  .category-header-title {
    display: table-cell;
    vertical-align: middle;  
    width: 33.3%;  
  }
  
  .category-header-nav {
    position: static;
    display: table-cell;
    width: 33.3%;
    height: auto;
    vertical-align: middle;
  }
  
  nav ul:first-child {
    margin-left: 0;
  }
  
  category-header-nav-inner {
    display: block;
    height: auto;  
  }
  
  .category-menu {
    display: block;
  }
  
  .category-header-title .reveal,
  .category-header-nav .hide {
    display: none;
  }

}

#category-menu-in:target ~ .category-header .category-header-nav {
  right: 0;
}

#category-menu-out:target ~ .category-header .category-header-nav {
  right: 100%;
}

</style>
  
</head>
<body>

<span id="category-menu-in"></span>
<span id="category-menu-out"></span>

<div class="category-header">
  <div class="category-header-inner">
    <div class="category-header-row">
    
      <div class="category-header-title">
        <h2><span>Category</span></h2><a href="#category-menu-in" class="reveal">&thinsp;<i class="fa fa-angle-right"></i></a>
      </div>
        
      <div class="category-header-nav">
        <div class="category-header-nav-inner">
        
          <a href="#category-menu-out" class="hide">&thinsp;<i class="fa fa-angle-right"></i></a>
          <nav class="category-menu">
            <ul class="menu">
              <li class="first leaf"><a href="#">Blah1</a></li>
              <li class="leaf"><a href="#">Blah2</a></li>
              <!-- <li class="leaf"><a href="#">Bicycles</a></li> -->
            </ul>
            <ul class="menu">
              <li class="leaf"><a href="#">Blah3</a></li>
              <li class="leaf"><a href="#">Blah4</a></li>
              <!-- <li class="last leaf"><a href="#">Curated</a></li> -->
            </ul>
          </nav>
          
        </div>
      </div>
      
    </div>  
  </div>
</div>

</body>
</html>