I am creating a CSS transition that scale the inner element when the parent state is hover.
However the parent has a border-radius property that does not get forced on the actual hover itself. When the user is hovering the element there is no border-radius shown.
I figure out that has to do with the overflow, I tried to have a z-index for the parent to be higher than the child one but had no luck.
My fiddle:
https://jsfiddle.net/muLhkx9m/1/
Your issue is a known bug with the transitions and backface visibility.
To be more specific - the scale transitions often need one more "browser hack" to function properly - and that is
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
I have added this to your fiddle, to the .box element and check for yourself how it works :)
Your Updated Fiddle
Related
I'm trying to translate an svg graphic in the y-axis with CSS transforms. I'm having no problem with the translate part:
transform: translate3d(0, -100px, 0);
BUT, the 100px up in the Y direction moves the svg graphic behind the parent div. I've tried putting different z-index on the various elements but can't get the svg graphic to be in front.
Here's images to show you want I mean:
And after the translate:
transform: translate3d(0, -100px, 0);
This doens't look like a z-index problem to me, but overflow. Try setting overflow: visible on .svg-container where it is currently set to hidden.
Set overflow: visible on .svg-container where it is currently set to hidden. That worked for me (inspired by Hugo Silva he deserves the correct answer). I've edited his post with the amendments
edit
Actually this is just a partial fix, this works:
transform: translateY(-100px) translateX(-3px);
but this doesn't:
transform: translateY(-100px) translateX(-3px);
I have problem with fixed background as its not rendering right in chrome 40/webkit, and after some search I found adding
-webkit-transform: translateZ(0);
fixes that, however that will break any div with
position:fixed;
Here is an example shows that the div is not fixed anymore, however the background renders just fine in the example even if translateZ(0) removed! which doesn't happen in my case.
https://jsfiddle.net/4hbj5b6e/7/
works fine on IE, Firefox...
Try using -webkit-perspective: 0; instead of -webkit-transform: translateZ(0);.
Here's your updated fiddle.
Actually I have found what has caused the problem. My question is now why adding transform to your html, body breaks the position: fixed?
Original problem
The most simple CSS task seems to fail for me: position: fixed does not keep the position of the element relative to the view point. Consider the following stylesheet:
.stay-there-dammit {
position: fixed;
right: 0px;
left: 0px;
z-index: 1030;
}
For the first time the page loads, the positioning is correct. But any changes to viewport such as scrolling or resizing doesn't affect the positioning of .stay-there-dammit element. So to speak it doesn't adapt its position to the new viewport.
Strangely enough this site which shows how position: fixed should work, actually work in my browser with no problems whatsoever!
So the question is: Is there anything that might break fixed positioning?
Btw. I use Bootstrap 3.
UPDATE:
It seems that it was the transform set by some third-party application on html,body that broke the position: fixed. Here is what I had to remove:
html, body {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
It seems that the following question addresses the same issue:
Positions fixed doesn't work when using -webkit-transform
BUT WHY?
Regarding the why, a quick quote from this article by meyer:
A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport
It's a quirky behavior that's been around since 2011.
I do opacity transition on img element as it is in here and i see that img size changing or img is moving when transition on end or start;
Here is simple css code for styling.
img{
height:165px;
width:165px;
opacity:0.4;
transition: all linear 1s;
}
img:hover{
opacity:1;
}
I tested it on Chrome 31 version. How can i get rid of this problem ?
Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%
Seems to be a bug in Chrome, just transitioning the opacity makes no difference for me.
Apply a 3D transform, of nothing, to resolve the issue.
-webkit-transform: translateZ(0);
I don't see the movement but you can try with just the specific property instead of all:
transition: opacity linear 1s;
The demo http://jsfiddle.net/cKUFD/4/
I Had the same problem, so i tried different images in this fiddle:
https://jsfiddle.net/s04428yc/15/
The first image works fine, while the second contracts on hover.
So i came to the conclusion that the image ratio is causing the problem.
And the solution was, like #addedlovely already stated:
-webkit-transform: translateZ(0);
and this should be applied on the element without the hover pseudo selector.
Or one could simply change the actual image ratio.
Adding a 1px transparent border to the right of the element fixed this for me. I had a grid of images with no space at all between them, and this bug would cause some of them to expand by 1 pixel horizontally when the transition happened.
-webkit-transform: translateZ(0); does work, however, it also changed the width of some of the images by 1px permanently. (This fix also changes the width of the images by 1px permanently, but at least it's consistent.)
I ended up liking the look of a 1 pixel border more anyway and so I kept it, but this obviously won't be a fix for everyone because it changes the look of your page.
live demo: http://codepen.io/flanker/pen/ajAow
There are three elements like:
<div class="parent">
<div class="child"></div>
</div>
In the first one parent has a border-radius and child element will be overflowed. In the second one parent has a border-radius and overflow: hidden so the child is clipped. Both of them work fine.
But in the third one, the parent element has border-radius and overflow: hidden. This time I added a animation to the child element, then the overflow: hidden is not working in Chrome (Version 28.0.1500.52 beta / Mac OS X 10.8.3). The child is still be visible out of the parent element.
But it works fine in Firefox (20.0)
Is this a Chrome bug? Or am I missing any other CSS properties?
Thanks.
All you have to do is add to the parent element follow css:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
Just add overflow: hidden; to your last class?
.flash .bar {
-webkit-animation: flash 5s linear infinite;
overflow: hidden;
}
The live demo is updated with this and appears to be working in chrome.
Looks like this is fixed in Chrome 29 (Tested in Chrome Version 29.0.1547.22 beta).