所有屏幕宽度

Question

我设置了我们的滑块，就像它们在前一个主题here上显示的那样，有三个包装器可以垂直和水平居中显示我的标题。虽然表格div在所有屏幕分辨率上都不是100％宽。

当我调整屏幕大小时，它在100％宽和（100％-1px）宽之间跳跃。为什么这样，我能做些什么来阻止它呢？

Editable JSFiddle / Fullscreen JSFiddle

.caption {
 position: absolute;
 height: 100%;
 top:0;
 display: block;
 width: 100%;
 z-index: 100;
}
.caption-inner {
 display:table;
 text-align: center;
 height: 100%;
 width: 100%;
}
.caption-inner-cell {
 display: table-cell;
 text-align: center;
 background-color: rgba(0,0,0,.0);
 vertical-align: middle;
 }
.caption-text {
  z-index: 0;
  position:relative;
  display:block;
  padding: 35px 0;
  margin:0;
  font-size: 28px;
  font-weight: bold;
  background: url(img/extra/transparent-22-percent.png);
  background-repeat: repeat;
 }

使用html：

<div class="caption">
    <div class="caption-inner">
        <div class="caption-inner-cell">
            <span class="caption-text">
                <h2 class="caption-title pink-text">
                    <?php the_title(); ?>
                </h2>
                <div class="caption-sub-title">
                    <?php the_content(); ?> 
                </div>
            </span>
        </div>
    </div>
</div>

我使用谷歌浏览器，但我也看到了Ipad Safari上的问题