webkit（safari / chrome）图像定位问题

Question

我在此页面上的图像定位时遇到了麻烦：

http://www.beatekoerner.com/new/works.html

这是基本的HTML：

<div id="container">
<div class="gridContainer">
<div id="nav">
<ul>
<li><a href="index.html"><img src="./images/title.png"></a></li>
<li><a href="about.html">about</a></li>
</ul>
<hr>
</div>
<div id="maintext" class="tiles">
<div class="image"><a href="works/time.html"><img src="images/thumbnails/time.jpg"><h2>time</h2></a></div>
<div class="image"><a href="works/shame.html"><img src="images/thumbnails/shame.jpg"><h2>shame</h2></a></div>
</div>

和CSS：

#nav {  
    position: absolute;
    width: inherit;
    height: auto;
    z-index: 100;
}

#subnav {opacity: 0.7;}

#maintext { 
    position: fixed;
    top: 180px;
    height: 70%;
    overflow: scroll;
    margin: 0px auto 10px auto;
    width: inherit;
    z-index: -100;  
}

#maintext img {
    padding: 10px;
    width: inherit;
    max-width: 600px;
}

.tiles {
    text-align: center;
}

#maintext.tiles img:hover {
    opacity:0.4; 
    outline: none;
}

.image { 
   position: relative; 
   width: 200px;
   height: 200px;
   display: inline;
   vertical-align: top;
}

计划是在常规网格中显示图像，但不知何故总是与Safari和Chrome一起使用。一个例子：

所以这似乎是一个基于webkit的问题。我尝试过一些似乎有助于解决类似问题的事情，但到目前为止还没有任何效果。

此外：Chrome不允许滚动某些智能手机。这种行为对我来说似乎是随机的。

有没有人对浏览器的行为有这样的经历？

编辑：有趣的事实：如果在出现问题后在Safari中更改了浏览器的大小，则图像排列正常。这毫无意义。