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.
Related
I've created a div-circle in which I want to hold (1) an image and (2) three div-waves (see image). My solution is working on desktop with Chrome, Firefox, Microsoft Edge, Internet Explorer. However, on my iPhone, the overflow doesn't work at all, either in safari or chrome. Here's an image of the difference in result. The relevant HTML looks like this:
<div class="circleContainer">
<div class="wavesContainer">
<div class="wave1" />
<div class="wave1" />
<div class="wave1" />
</div>
<img />
</div>
And the relevant CSS code looks like this:
.circleContainer {
border-radius: 300px;
height: 200px;
width: 200px;
background-color: #232323;
overflow: hidden;
position: relative;
border: #404040 solid 4px;
background-image: URL("pathToBackgroundImage");
background-size: 300px;
background-position: -20px;
transition: .5s;
opacity: 1;
}
.wavesContainer {
transition: .5s;
opacity: 1;
}
.wave1,
.wave2,
.wave3 {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
}
.circleContainer img {
height: 220px;
top: 28px;
left: 18px;
opacity: 1;
transition: .5s;
position: absolute;
}
NOTE: The HTML and CSS are simplified, but I think the code above is all that is necessary to solve this issue.
Here is the code if you want to see it for your self: https://github.com/rrudling/rudling-tech/tree/main/src/components/pages/HomePage/ImageAnimation and here is the live demo: https://rudling-tech.web.app/
I am pretty experienced with CSS and still nothing I've tried work, so you guys are my last hope. I appreciate all the help I can get!
I solved this with a rather brute-force solution. Namely to create a rectangular shape (the red one in this image) with a transparent circle cut, as seen in this thread. I could then hard code some of the z-indices such that the rectangle only hides what I want it to. I also added a new circle with a border (the green one in this image) so I could keep the border around the circle.
It wasn't the solution I was hoping for, but it fully solved my problem!
An issue I'm having is strange lines appearing in certain situations. So far I only notice the issue in Webkit browsers. Also, I know my HTML is not done in the most efficient way, but for the purposes of my project, I would like it to remain the same, unless it is the cause of the issue. For my current work, it happens when I highlight text, or click certain things. This is a big issue since highlighting will be done a lot on my page. Please see my example below, note the extra blue areas in the first image are caused by highlighting text (not shown).
As you can see, when the page loads the lines are not present, however — after using the page for a bit, lines like this appear.
I did my best to recreate the problem in JS fiddle, and I was actually able to. If you highlight text, and then click off the text, you should see a line appear.
Here is my JSFiddle example.
Here is a a picture of the issue reproduced in JSFiddle.
HTML:
<div class="container">
<div class="background-image">
<div class="background-color"></div>
</div>
<div class="box">
<div>Highlight all text</div>
<div>Keep going!</div>
<div>Then click off to deselect</div>
</div>
</div>
CSS:
.container {
width: 500px;
height: 500px;
position: relative;
}
.background-image{
background: url('http://i.imgur.com/4pgHkXy.png') repeat;
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
top: 0;
left: 0;
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.background-color {
background: #00adee;
opacity: .5;
width: 500px;
height: 500px;
position: aboslute;
top: 0;
left: 0;
}
.box {
background: #fff;
top: 20px;
bottom: 20px;
width: 200px;
height: 300px;
position: absolute;
}
.box div {
margin: 10px;
width: 180px;
height: 50px;
background: #ccc;
}
If I had to make a guess, I would assume it has something to do with the blur effect?
Any idea how to fix this?
Also reproducible on Mac OS X / Latest Chrome.
This is a bug in Webkit that seems to be caused by combining transform:scale with filter:blur. If I remove the transform in the jsfiddle, the glitch is no longer reproducible: https://jsfiddle.net/2fr6tcgz/
If the only reason you're using scale is to hide the blurry edges of the background, you could use background-size: 105% auto; background-position: center center; as a workaround: https://jsfiddle.net/xa23ja88/ (I also fixed the position: aboslute; typo).
Update:
Apparently the above doesn't fix it completely. But this does: https://jsfiddle.net/o0mupqbo/ (switching the nesting of background image and color). Does that work in your situation?
please take a look at the image
My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but not the legs. And the Image should be animated so that they can "walk" from left to right.
The Problem is for me, that i have no Idea how to archiv the part with heads can "leave" the box but the legs need a "overflow" hidden.
The Blue box should be 100% in width, so rotate -6deg to the div and +6deg to the people doesnt work.
Thank you for my help. If it shouldnt be clear what my problem ist, just ask. Englisch is not first language ^^ Thanks.
Edit: No "Cover" divs. There is a gradient i need to see. the white area above and beneath the blue has to be transparent.
EDit2: I think i got it ^^ Look at this Thanks to SD. !
https://jsfiddle.net/rsr04udj/
You can try some tricks to cover legs and not heads.
Please check this demo I have create small example with text only. You can replace text with images you have.
<div class="wraper">
<div class="whitebar">
<div class="people">PEOPLE</div>
</div>
</div>
Demo
You could use a combination of z-index and pseudo elements for this kind of functionality, meaning that rather than 'hiding the legs', you can sandwich it behind one skewed pseudo and in front of another, creating this 'bottom hidden and top shown' effect:
JsFiddle Demo
Demo Snippet (view snippet in full screen)
.people {
background: url(http://fs2.directupload.net/images/150304/f48hrkmk.png) no-repeat;
background-size: 200px 300px;
height: 300px;
width: 200px;
position: absolute;
bottom: 0;
left: 0;
z-index: 7;
transition: all 6s;
}
.wrap:hover .people {
left: 100%;
}
.wrap {
height: 400px;
width: 100%;
position: relative;
background: lightblue;
overflow: hidden;
}
.wrap:before {
height: 50%;
width: 100%;
content: "";
position: absolute;
top: -20%;
z-index: 6;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
.wrap:after {
height: 50%;
width: 100%;
content: "";
position: absolute;
bottom: -20%;
z-index: 8;
left: 0;
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
transform: skewY(-6deg);
background: white;
}
<div class="wrap">
<div class="people"></div>
</div>
<div class='wrapper'>
<div class='blue-container'>
<div class='people></div>
</div> //remove overflow hidden
<div class='bottom-div></div> // use this div to hide the legs
z-index: 100;
</div> // make this overflow : hidden
I see that you don't have in your code on the .wrapper class position relative.
This is a problem when you use some inner child as absolute It sometimes can be the reason to some problems like this or unwanted scrollbar.
In case there's no relative parent then the absolute will be relative to the window.
(In case of unwanted scrollbar: There's cases when you want the parent to have the overflow hidden and the absolute with scrollbar i saw some people use to put overflow on the html and the body which is bad practice in my opinion but it can cause more issues than benefits, but it's not your case here).
in your case:
.wrapper{
...
position:relative;
}
for the children (in your case whitebar):
.whitebar {
...
height:600px;
}
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
I use jQuery and fade in divs. Works great on all browsers, but IE8 (I suspect other IE versions as well) will cut off divs that overflow an outer div when their opacity is set with filter: alpha(opacity=100). If you copy and paste the following into a file and load that with IE8, you'll see the blue square gets cut off because it overflows its outer div.
<html>
<head>
<style>
.outer {
filter: alpha(opacity=100);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
How can I get this to work where the inner div is allowed to overflow (yes I've tried overflow: visible) and I can use jQuery's animation mechanism for opacity?
in your example it's the Doctype or lack thereof causing it to break in IE8, but overall it's a problem with IE filters and hasLayout even with a proper Doctype is still happens in IE7. While not sure what exactly you're trying to animate I've come up with a workaround for the example in your OP
The key is not to have the outer div positioned, if you need it to be, wrap it another div which "place-holds" the position. The other thing I found was that IE could also do with an opacity filter on the inner div, but you may not in your real code
here's some workaround code:
CSS
#wrap{ position: absolute; top: 30px; left:150px}
.outer {
filter: alpha(opacity=50);
opacity: 0.5;
width: 200px;
height: 150px;
border: 2px solid #f00;
background-color: #700;
}
.inner {
position: absolute;
filter: alpha(opacity=50);
top: 100px;
left: 50px;
width: 100px;
height: 100px;
border: 2px solid #00f;
background-color: #007;
}
button {position: absolute; left: 0px; width: 100px;}
HTML
<button>Toggle Fade</button>
<div id="wrap">
<div class="outer">
<div class="inner"></div>
</div>
</div>
jQuery
$(document).ready(function() {
$('button').click(function(e) {
$('.outer, .inner').fadeToggle("slow", "linear");
});
});
If the toggle is not also applied to the inner div, then the animation is rather jerky in IE, it smoothly fades the outer div but the inner div just shows/hides instantly
the other browsers don't need opacity on inner as they rightly inherit it.. so on that one it's up to you wether you need that filter on inner