Weird Css Stretching Issue In Ios7 Safari And Chrome

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 a

Solution 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><divstyle="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.

Solution 2:

Try using backface-visibility:

-webkit-backface-visibility:hidden;

it caused my headings to stretch, once removed the world was and is a happier place

tested on iOS 6 & iOS 7 & Android 4.2 +

Solution 3:

Another apparent workaround that avoids creating additional compositing layers is to add perspective to the elements that are in a GPU-composited context. (In this case, that's the elements with opacity.) Note that if you're positioning things in 3D space with translate3d, this will have a visual impact, and may not be an effective workaround.

.period1, .period2, .period3 {
  -webkit-perspective: 1px;
  perspective: 1px;
}

Solution 4:

maybe this fixes the issue:

add height:17px; to .node so your css should look like

.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