Weird CSS stretching issue in iOS7 Safari and Chrome

Question

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.

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.

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.

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?

Any ideas?

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>

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; }

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

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.

Fiddle here

Answer 1

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>

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>

The new div was briefly displaying before the whole ul would get stretched down over the top of the new 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);
}

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.