iOS7 Safari和Chrome中出现奇怪的CSS延伸问题

Question

自从在多个iPhone和iPad上升级到iOS 7以来,我们已经看到在我们网站上的部分用户界面发生了一些非常奇怪的事情.

附加图像中的粉红色框位于绝对定位的父级内,它有两个绝对位于其中的白色div,每个div都有不同的不透明度.粉色圆圈只是一个div,其边界半径设置为圆形.此布局中根本没有图像.

出于某种原因,浏览器间歇地拉伸粉红色的div,但是我想不出任何会导致它的东西 - 如果我想的话,我不知道如何实现这个效果!

我认为它是浏览器中的一个错误,但我不知道如何修复它.

我没有包含任何代码,因为它真的非常简单,并且没有任何内容可以导致这种情况(实际上它在iOS6中有效).只是希望有人见过这个？

有任何想法吗？

CSS问题http://i41.tinypic.com/264289i.png

更新 响应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>

适用于'期间'容器和子代的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可能会强制它正确渲染的任何建议？你认为单靠高度就够了,但显然不是.

在这里小提琴

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>

新的div在整个ul将在新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搞砸.

希望这足以让你找到解决方案,但如果没有,请告诉我,我可以更多地回答这个问题.

Answer 2

也许这可以解决问题：

添加高度：17px；到 .node 所以你的 css 应该看起来像

.node {
    background-color: #F9F9F9;
    border: 6px solid #DD545C;
    border-radius: 50% 50% 50% 50%;
    bottom: 0;
    height: 17px; /*new*/
    left: 50%;
    margin-left: -15px;
    position: absolute;
    width: 17px;
}

jsFiddle