html - iOS7 Safari 和 Chrome 中奇怪的 CSS 拉伸(stretch)问题

Question

自从在多部 iPhone 和 iPad 上升级到 iOS 7 后，我们发现我们网站的部分 UI 发生了一些非常奇怪的事情。

所附图片中的粉红色框位于绝对定位的父项中，并且它有两个绝对定位在其中的白色 div，每个都有不同的不透明度。粉色圆圈只是一个设置了 border-radius 使其成为圆圈的 div。此布局中根本没有图像。

出于某种原因，浏览器间歇性地拉伸(stretch)粉红色的 div，但我想不出任何会导致这种情况的原因 - 如果我想的话，我也不知道如何实现这种效果!

我认为这是浏览器中的错误，但我不知道如何修复它。

我没有包含任何代码，因为它真的非常简单，并且没有任何东西会导致这种情况(而且它确实适用于 iOS6)。只是希望有人以前看过这个？

有什么想法吗？

更新为了回应 cimmamon 的评论，这里是代码:

<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
    <div class="period3"></div>
    <div class="period2"></div>
    <div class="period1"></div>
    <div class="nodeline colBk">
        <div class="node colBrd"></div>
    </div>
</div>
<div class="inner">
    <div class="group first">
        <div class="branch colBk"></div>
        <a class="story">
            <div class="strip colBk"></div>
            <div class="caption">
                <div class="text">
                    <p class="title">Test</p>
                </div>
            </div>
        </a>
    </div>
</div>

以及应用于“periods”容器和子容器的 CSS:

.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }

这是一个非常奇怪的错误 - 在我看来，CSS 中没有任何内容会导致此错误。

关于我可以添加什么 CSS 的任何建议可能会强制它正确呈现？您可能认为仅靠高度就足够了，但显然不够。

Fiddle here

Answer 1

我遇到过这个问题，现在在 Safari 7 中也有。

这是我的情况的简化版本

HTML

<ul>
  <li>
    <a> Some text </a>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

然后我有一些 javascript(在我的例子中是 bootstrap 工具提示)，它添加了一个构成 html 的元素

<ul>
  <li>
    <a> Some text </a>
    <div style="position: absolute" class="tooltip"> Some content here </div>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

在整个 ul 被拉伸(stretch)到新 div 的顶部之前，新的 div 会短暂显示。

这一定是 safari 中的一个错误，但将以下 CSS 添加到插入的 div 可以作为解决方法。

.tooltip {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

这会强制插入的 div 在新的复合层中呈现，这似乎可以防止 Safari 搞砸。

希望这足以让您找到解决方案，但如果没有，请告诉我，我可以进一步充实这个答案。