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
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.
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 +
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;
}
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
Related
I am making my own website and I wanted to test out a style for my photos where I essentially give them a colored shadow by placing an image with a blur effect behind the photo. It works great...on Chrome, Safari is another story.
Can someone explain why the image is shifted to the right on Safari but not on Chrome and how I can fix this?
Thanks!
HTML
.center {
text-align: center;
}
.focal-image {
width: 500px;
height: 500px;
border-radius: 25px;
z-index: 1;
position: absolute;
}
.focal-image-blur {
width: 500px;
height: 500px;
border-radius: 10%;
-webkit-filter: blur(10px);
filter: blur(10px);
position: relative;
}
<body>
<div class="center">
<h1>Mark Reggiardo</h1>
<p>Welcome to my website. This page is currently under construction. Meanwhile, here is a picture of the ocean :)</p>
<img class="focal-image" src="/assets/images/CatalinaOcean.png" alt="A view of the ocean from my trip to Catalina Island">
<img class="focal-image-blur" src="/assets/images/CatalinaOcean.png">
</div>
</body>
What the site looks like on Chrome:
What the site looks like on Safari:
The problem on Safari is that it does not align the imgs centrally, though Chrome uses the 'text-align: center' to do that.
A couple of adjustments to be made.
The absolutely positioned img needs to 'find' a parent element that is itself explicitly positioned. As the .center div is not, it goes back up and the positioning will happen relative to the body (in the given snippet). So make the .center element have position: relative;
The main img is not getting centered correctly and to do that we can center it by first moving it 50% across the parent div and then back 50% of its own width.
Here's a snippet which works on both Chrome and Safari and you don't need to get rid of the .center div.
.center {
text-align: center;
position:relative;
}
.focal-image {
width: 500px;
height: 500px;
border-radius: 25px;
z-index: 1;
position: absolute;
left:50%;
transform: translateX(-50%);
}
.focal-image-blur {
width: 500px;
height: 500px;
border-radius: 10%;
-webkit-filter: blur(10px);
filter: blur(10px);
position: relative;
}
<body>
<div class="center">
<h1>Mark Reggiardo</h1>
<p>Welcome to my website. This page is currently under construction. Meanwhile, here is a picture of the ocean :)</p>
<img class="focal-image" src="https://i.stack.imgur.com/Hk1uV.jpg" alt="A view of the ocean from my trip to Catalina Island">
<img class="focal-image-blur" src="https://i.stack.imgur.com/Hk1uV.jpg">
</div>
</body>
It really is a fairly complicated problem to describe verbally. Take a look at this snippet:
$("button").on("click",() => {
$("#div1").css("transform","translateZ(50px)");
})
.testdiv {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transition: transform 1s;
backface-visibility: hidden;
}
#container {
position: absolute;
top: 100px;
left: 100px;
perspective: 500px;
}
#div1 {
background-color: #f00;
margin-left: 50px;
transform: translateZ(10px);
}
#div2 {
background-color: #0f0;
transform: translateZ(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="testdiv">
1
</div>
<div id="div2" class="testdiv">
2
</div>
</div>
<button>Move 1 to front
</button>
Using both Firefox and Chrome on my mac, after clicking the "Move 1 to front" button, div1 is still covered by div2 even it's more out of the screen (translateZ value is higher). My expectation is that div1 should cover div2 once it surpasses div2 on the z-axis, since that makes more sense. (It's a little bit abstract I know)
Safari doesn't have this issue - so if you do happen to be able to run it on Safari, you'll see what I'm trying to describe. I'm not saying that Safari's implementation is superior, but in fact that is the behavior I'm looking for. Is there any way to achieve the same effect on Chrome and Firefox?
Turns out, adding transform-style: preserve-3d to the container does the job.
I have a skewed popup and text in the quick view of products. But its not rendering correctly in chrome. I tried translate 3d(0,0,0) and also changes the skew deg from odd to even but it doesn't resolved my problem.
Anyone can please help me with this.
Blurring is minor issue while skewing for making the items look smoother. If you really need to make the blurring gone, simply skew only the background div and leave the foreground div untouched.
.background {
width: 300px;
height: 100px;
background: lightgrey;
position: absolute;
top: 60px;
-webkit-transform: skewY(-5deg);
}
.foreground {
width: 280px;
height: 100px;
position: absolute;
top: 60px;
padding: 10px;
text-align: center;
}
.dialog {
width: 300px;
margin: 0 auto;
}
<div class="dialog">
<div class="background">
</div>
<div class="foreground">
<p>Here goes some foreground text.</p>
</div>
</div>
I've searched seemingly everywhere, and tried multiple approaches but can't find a solution to this basic issue. Making a link fit inside of a box with rounded corners without overflowing. The example works fine in Firefox which bothers me even more.
Edit: Below Passerby made this excellent example to better visualize the problem: http://jsfiddle.net/wjpdd/7/
The best work-around I've found for this issue is making the div clickable with javascript and styling the :hover cursor in css. but would love a less boot-legged option if anyone has one
Original example:
http://jsfiddle.net/wjpdd/3/
and the
html:
<div class="circle">
<a href="#" class="fill">
<div class="circleoutline">
</div>
</a>
</div>
css:
.circle{
width: 310px;
height: 310px;
border-radius: 155px;
background-color: grey;
top: 18px;
left: 10px;
overflow:hidden;
}
.fill{
width: 100%;
height: 100%;
border-radius: 155px;
}
.circleoutline{
position: relative;
top:5.5px;
left:5.5px;
width: 295px;
height: 295px;
border-radius: 150px;
-webkit-border-radius:150px;
border: 2px solid blue;
}
H!
I have an issue with the positioning of some elements in webkit-browsers and firefox.
In Safari/Chrome, it looks like I want it to be:
But in Firefox, it looks like this:
Code
HTML
<ul>
<li>
<div class="img">
<a href="#">
<img src="#" />
<p><span class="circle"><img src="white-circle.png" alt="" /></span></p>
</a>
</div>
</li>
</ul>
CSS
li {
position: relative;
}
p {
top: 0;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
background-color: black;
}
p img {
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35%;
margin-left: -35%;
}
Any idea what's going on there? Does Firefox interprets the position: absolute differently?
When you use absolute positioning firefox seems to always move things differently to Chrome and Safari. My opinion is
p img:{position: relative;}
(relative positions is fine its only when i use absolute).
Good Luck
Apperently, some other messed up CSS rule was at work there. As a temporary fix I used this guide to find a solution working in Firefox.
Probably it's some rule affecting all images, but I could'n find it right now.