iOS7 Safari和Chrome中奇怪的CSS拉伸问题 [英] Weird CSS stretching issue in iOS7 Safari and Chrome

问题描述

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

Since upgrading to iOS 7 on multiple iPhones and iPads, we've seen something very strange happening to part of the UI on our website.

所附图像中的粉红色框位于绝对位置的父对象中，并且绝对有两个白色div位于其中，每个不透明对象具有不同的不透明度.粉色圆圈只是一个具有设置边框半径以使其成为圆圈的div.此布局中根本没有图像.

The pink box in the image attached is within an absolutely positioned parent and it has two white divs positioned absolutely within it, each with differing opacities. The pink circle is just a div that has border-radius set to make it a circle. There are no images at all in this layout.

由于某种原因，浏览器间歇性地拉伸了粉红色的div，但我想不出会导致它的任何东西-如果我愿意，我也不知道如何实现这种效果！

For some reason, the browser is intermittently stretching the pink div, but I can't think of anything that would cause it - and I'd have no idea how to achieve this effect if I wanted to!

我认为这是浏览器中的错误，但我不知道如何解决.

I presume it's a bug in the browser(s), but I don't know how to fix it.

我没有包含任何代码，因为它们的确非常非常简单，而且里面没有任何东西会引起这种情况(并且确实可以在iOS6中使用).只是希望有人曾经见过这个?

I haven't included any code as it's all really, really straightforward and there's nothing in there that would cause this (and indeed it works in iOS6). Just hoping someone has seen this before?

有什么想法吗?

更新 为了回应cimmamon的评论，以下是代码:

Update In response to comment by cimmamon here's the code:

<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:

And the CSS that applies to the 'periods' container and children:

.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中没有任何东西可以引起这种情况，我可以看到.

It's such a strange bug - there's nothing in the CSS that could cause this that I can see.

关于我可以添加哪些CSS的任何建议可能会迫使其正确呈现?您会认为仅此高度就足够了，但显然还不够.

Any suggestions on what CSS I could add that might force it to render correctly? You'd think the height alone would be enough but obviously not.

在此处进行提示

推荐答案

我遇到了这个问题，现在也存在于Safari 7中.

I've had this problem, and it's also now in Safari 7.

这是我的情况的简化版本

Here's a simplified version of what was happening in my case

HTML

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

然后我有了一些javascript(在我的情况下是引导工具提示)，该javascript中添加了一个元素，该元素构成了html

I then had some javascript (in my case the bootstrap tooltip) which was adding in an element which made the 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在新div的顶部向下延伸 之前，新的div会短暂显示.

The new div was briefly displaying before the whole ul would get stretched down over the top of the new div.

这肯定是野生动物园中的一个错误，但是将以下CSS添加到插入的div中可以解决此问题.

This has got to be a bug in safari, but adding the following CSS to the inserted div works as a workaround.

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

这将迫使插入的div呈现在新的复合层中，这似乎可以防止Safari搞砸.

This forces the inserted div to be rendered in a new composite layer which seems to prevent Safari screwing up.

希望这足以为您提供解决方案，但如果不能，请告诉我，我可以多补充一点此答案.

Hopefully this is enough for you to reach a solution but let me know if not and I can flesh this answer out a bit more.

这篇关于iOS7 Safari和Chrome中奇怪的CSS拉伸问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！