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);
Related
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
I've been going crazy about that and haven't found a solution yet, any content in the div gets blured for some reason if a transform is being applied.
Though this only happens in chrome.
I've tried using the Webkit style declaration : -webkit-font-smoothing but I didn't succeed.
The div CSS:
#divId {
width: 100%;
height: 100%;
-webkit-transform: translateX(-52%);
transform: translateX(-52%);
}
below are 2 images showing the difference with and without the transform,
the first is with transform and the second is without the transform. thanks
try moving the div without transform
like using { position:relative;left:-52%;}
transform usually changes the quality of a text or img ( like translate or scale ) and as far as i know there is no 100% accurate work around about this
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.
Problem: css3 transforms applied to a child element inside a div are ignored by the browser (FF5, Chrome12, IE9) when calculating the scrollHeight and scrollWidth of the containing div's scrollbars when using "overflow: auto;".
<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>
<div><img src="somelargeimage.png" /></div>
I have put together a small test on jsfiddle showing the undesired behavior.
http://jsfiddle.net/4b9BJ/
Essentially I am trying to create a simple web based image viewer using css3 transforms for rotate and scale and would like a containing div with fixed width/height to be able to scroll to see the full content of the image it contains.
Is there an intelligent way to handle this issue, or even a rough workaround? Any help is appreciated.
I added an extra div to each of the transformations and by setting fixed widths for those divs and clipping overflow I manged to make them the correct size. But then I had to use position: relative and top: blah; left: blah to shift the images into the correct position.
http://jsfiddle.net/4b9BJ/7/
I've got a <span class="name"> next to an <img> inside a <div>. Inside this span I have some text which I want to turn 90 degrees. However, when I do this (as code suggests below) the span ends up in a somewhat weird position on top of the image.
In IE, the text doesn't rotate at all.
.name {
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Any suggestions as to how I solve this?
I've fixed this on my own what I needed to do was put a fixed size on the span and then use position:absolute; to position it where I wanted it
I'm not sure how to fix it. But the reason it doesn't rotate in IE is that you are using "webkit" and "moz" to rotate - which are firefox-like-browser specific functions. You'll have to google for an IE-equivalent.