I have this weird issue with Firefox. Works okay in Chrome.
Basically, a <input> inside a div, which has this style:
.modal {
overflow:auto;
position: fixed;
top: 50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
Shows the autocomplete thingy in a totally wrong location, as you can see:
Here's a fiddle.
Any solution is welcome. (disabling autocomplete is not really what I want tho).
Why do you want to use translate to position the div, can't you adjust with top and left Unless you are using animation and keyframes translate does not provide that great benefit.
The space on the page that the element occupies remains the same as before transition,so here your autocomplete menu opens at location before the translation.
The autocomplete bug in Firefox seems to get fixed in FF33:
Comment of Catalin Varga on Bugzilla
Related
I am trying to center svgs on top of each other. I am using the same method to position the divs and the svgs inside each other, but this is only working in chrome.
Following code is used to center:
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
This is how it looks like in Firefox:
The code can be found here.
Does anybody have a clue?
EDIT: I have found out what is happening: Firefox is applying the transform to the svg itself and thus moving the svg out of the viewbox. Have not found a solution yet.
Thanks!
I have now found the answer:
Firefox cascaded the translation onto the "use" tag and thus the position of the svg on the viewbox got translated. To counteract this i added the css rule:
use{
transform: translate(50% 50%)
}
Feel free to add any insight as to why this is happening.
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 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
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.