Weird Css Stretching Issue In Ios7 Safari And Chrome
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;
}
Post a Comment for "Weird Css Stretching Issue In Ios7 Safari And Chrome"