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.
Related
I'm facing laggy width css transition (1200px to 100%) on a position:sticky div living beside a list of div items.
Chrome and Firefox runs smoothly.
The more items div on the page, the more the transition is laggy on Safari.
I've tried
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
with no success.
Any suggestion?
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);
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.
I searched for this and found many solutions (using css3 transition).
Actually i am using {zoom:1.5} for all my buttons. But it is not working on firefox.
when I use transition property like:
-moz-transform: scale(1.5); /* Firefox */
-moz-transform-origin: 0 0;
All my buttons are overlapping. See ok and cancel button.
Is there any other alternative for this??
any help??
To scale 50% and keep top center:
transform: scale(0.5);
transform-origin: 50% 0;
This did work with Safari/Firefox/Chrome (I did not test with IE)
You can use:-
-moz-transform: scale(0.8);
in firefox as alternative..
It was a combination of the existing answers that did it for me:
-moz-transform: scale(...);
-moz-transform-origin: 0 0;
With 50% 0 as ricardo's answer suggesst for the latter option there was a left margin.
What others have posted isn't feasible because the image will still take the same amount of space. Granted the image size doesn't need to resize programmatically, you can scale the image using Gimp, and remove zoom.
Image | Scale Image
File | Export As...
put transform: scale(0.5); instead of zoom:0.5px, this will work.
may be you have to change margins accordingly