Having an issue with CSS transitions ignoring their parents overflow property during the transition in Chrome/Safari.
JS adding an active class to the child:
$('.child').addClass('active');
CSS for the parent/child
.parent {
position:relative;
width:250px;
height:250px;
background:#000;
border-radius:250px;
overflow:hidden;
}
.child {
opacity:0;
transition:1s opacity ease-in-out;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:blue;
width:250px;
height:250px;
&.active {
opacity:1;
}
}
Here's the fiddle: https://jsfiddle.net/b3ejm7qr/1/
During the transition, the child's content is shown outside of it's parent then disappears on completion.
Have tried adding backface-visibility with no luck.
Been trying to find the same problem but haven't had any luck... Was wondering if this is a known issue in Chrome/Safari and whether there's a fix / workaround?
Thank you!
You can have 3 solutions to your problem.
The two solutions that have already been stated as:
Add z-index: 1 to your parent.
Mention border-radius: 50% to the child.
And,
Just add the backface-visibility browser specific properties to your parent, along with the transform: translate3d properties. You have to set the translate3d properties manually due to a bug in the webkit browsers.
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
It can be browser bug . But you can give border-radius: 50% for your child element . After giving radius for child everything will for in all browsers
I added z-index to both elements, and maybe is what are you looking at. https://jsfiddle.net/b3ejm7qr/2/
If not, looks like is a bug type, as Giorgi says (Google search, first link).
Related
I'm wondering, if CSS position animations with "transition" and "transform" really don't affect the position of objects around the animated object, or if I'm missing something. I'm trying to get it to affect the sibling.
-webkit-transition: all 0.5s ease;
-webkit-transform: translateY(10em);
http://jsfiddle.net/W2L7B/6/
Thanks for your help!
For translate3d you need to have perspective I believe. Try this:
.slide {
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,10em,0);
}
If you want both of them to move, just add the transition to #second as well, then add this css:
.slide, .slide + div { /* or use ~ if you want it to affect all next siblings */
-webkit-transform: translateY(10em);
-webkit-perspective: 1000;
}
FIDDLE
I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.
Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:
I googled it, and found an answer on SO telling someone to set
-webkit-backface-visibility: hidden;
This cleared it up, but obviously only in webkit browsers.
I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.
Any suggestions?
jsFiddle
e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.
One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)
.box.one {
-webkit-transform: perspective(999px) rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: perspective(999px) rotate(1deg);
}
fiddle
Adding an after pseudo class with negative margin seems to fix the Firefox issue.
.rough:after {
content: "";
display: block;
margin: -1px;
height: 302px;
background: black;
}
Fiddle demo: http://jsfiddle.net/Wkk7W/3/
Note that the display:block seems to be an essential part of my hack/fix.
Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.
Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.
http://jsfiddle.net/Wkk7W/6/
Set the element to position:absolute, then give it a pseudo element with:
content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;
This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.
There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.
I am using borders on some content. However, I am finding an unwanted 1px outline the same color as the background color is being added around the border when the parent is transformed (at least with scale and rotate). This occurs on pseudo-elements of the children as well
.container {
transform:rotate(-45deg);
}
.child {
border:3px solid white; background:green;
}
jsFiddle to work with
I have tested on the newest Chrome and IE, the problem is on both
How can I get rid of this outline without using box-shadow or removing the transform?
Add a translateZ(1px)
.container {
position:absolute;
top:50%; left:50%;
-webkit-transform:translateZ(1px) rotate(-45deg);
transform:rotate(-45deg);
}
(not really sure why does this work ...)
fiddle
Seems that IE needs more fixing...
.container {
position:absolute;
top:50%; left:50%;
-webkit-transform:translateZ(1px) rotate(-45deg);
transform:perspective(999px) translateZ(1px) rotate(-45deg);
}
fiddle2
Not a great fix, but adding backface-visibility: hidden; which determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element, seems to fix it, at least in Chrome. I haven't got the possibility to test in IE though.
The reason I tried it is because this "hack" has solved simliar issues that I've had before. But I'm not really sure why it works ...
jsFiddle
In chrome you should be able to use -webkit-backface-visibility: hidden; to fix this. I'm not too sure about IE, I don't have anything to test that on right now.
http://jsfiddle.net/ayFbD/4/
I'm trying to get popups appearing as you hover over one of several boxes, and it's working fine except the other boxes appear over the top of my popup. I've tried applying z-index values to .original-box and .popup-box but no luck. I can't understand why z-index has no effect here?
Here's what I have:
http://jsfiddle.net/CK4tA/
<div class="original-box">
Hover over me
<div class="popup-box popup-box-centre">
Some popup content
</div>
</div>
Thanks in advance for any guidance!
EDIT: Awesome - thanks people! Just for my curiosity, why does adding z-index:0 to .original-box break it? That's what I had originally and didn't work. Thanks again :-)
add z-index to .popup-box.
.popup-box {
position:absolute;
top:0px;
width:230px;
height:230px;
padding:10px;
background-color:#EC006C;
color:#FFF;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
opacity:0;
filter:Alpha(opacity=0);
z-index: 1;
}
DEMO
Add a z-index to the box to show it on the top layer.
.popup-box{
z-index:1;
}
If you add this to the class in your css, it will work
you should put the z-index property only on the hover event. See below;
.original-box:hover .popup-box {
top:25px;
opacity:1;
filter:Alpha(opacity=100);
z-index: 20;
}
See your revised JSFiddle here. Hope this helps you my friend.
Note that the z-index is 20, you dont want conflicts with other plugins/code using z-index on other items.
First of all, an image of what I am trying to acheive:
Sample here:
http://i.imgur.com/3BpFF.png
The white box with the word 'div' in it is obviously the div I have. For my purposes, it's a div centered in a page using width:500px; margin: 0 auto;. What I want is to be able to align some rotated text (using -moz-transform: rotate(90deg) or alternatively prefixed rotates) along the top of the div, like the word 'Holy' above (sample text). I would also like to set the baseline on that div, though it isn't that important.
By the way, I used some absolute positioning in Firebug to get the text aligned there - it was hacked there using per pixel positioning. It's not very flexible (if at all) because once I increase the font size or change the position of the div, it's broken.
Also: I am open to using SASS and other such things (I don't have any experience with it yet, but I do I think it allows use of variables which may help).
When you can use CSS transform it means you can use pseudo elements in your CSS code. Then I will add that "Holly" part via :after pseudo element.
div:after{
content:"Holy";
line-height:20px;
position:absolute;
background:yellow;
padding:0 10px;
left:100%; top:0;
-webkit-transform:rotate(90deg) translateY(-100%);
-webkit-transform-origin:0 0;
}
As you can see I've use translateY to move this part out of the div, because we rotated the thing before then translateY will work as translateX.
transform-origin is set to 0 0.
This code is independent from you div size.
Look at it live here:
http://jsbin.com/akaziy/2/
You can place something like this in your .css file (the margin-top & margin-bottom are just examples)
div {
width:500px;
margin: 0px auto;
}
.holly {
margin-top:20px;
margin-left:520px
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer 9*/
-ms-transform: rotate(90deg);
/*undefined prefix*/
transform: rotate(90deg);
}