translate3d on html doesn't affect background-position on body in Firefox - css

When I do:
-webkit-transform: translate3d(0, 35px, 0px) !important;
transform: translate3d(0, 35px, 0px) !important;
on the HTML tag.
Chrome pushes everything down (including the body background with a position), but Firefox doesn't do so.
Example: http://jsfiddle.net/6VTAn/ (Open in Chrome and Firefox to notice the difference)
Is there an additional style/property that I can apply to the HTML tag that makes it exhibit the same behavior as Chrome.
I'm looking for a standard approach to push the page down across all websites and browsers.

Depending on which version of firefox you are using, you may need the moz prefix: -moz-transform: translate3d(0,35px,0)

Related

How can I make CSS calc function work in IE9 with negative numbers?

I have tried the following:
-ms-transform: translateY(calc(-100% - 70px));
-ms-transform: translateY(calc(- 100% - 70px));
-ms-transform: translateY(calc(0 - 100% - 70px));
-ms-transform: translateY(calc(0px - 70px - 100%));
None of this is picked up by IE9. Any idea how to get this to work in IE9? Works in Chrome and other modern browsers.
caniuse reports that:
IE10 and IE11 don't support using calc() inside a transform.
View the official bug report at MS IE trac (seems to be working on Edge tho)

How to debug CSS3 3d transformations in IE?

I want to create an animated information bar with CSS3 3D-animations based on the idea of this post.
I was able to recreate the same behaviour which works on Chrome, Firefox and Opera but not in IE: jsFiddle
Now I'm wondering that if there is any way to fix this animation to work in IE too - at least in IE 11?
(The original sample also doesn't work in IE.)
The main trick of this 3D-effect is that you have to create two elements - in this case two span elements - which are perpendicular to each other, and then on some "event" (on a hover or on some change) you rotate the wrapper of these elements by 90 degree:
#info.change #msgWrapper {
-webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
-ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
In IE it looks like that this rotation works but the initial layout is wrong.
Unfortunately it is very hard to debug, because the only thing that I can see in the developer toolbar is the transformation matrix - which looks correct...
Any idea on how to fix this stuff to work in IE?
see this Pages :
IE Transforms
3D Hands
Maybe Help you...

CSS transform not working IE

I have this stylesheet
.rotate div img
{
-webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
-webkit-transform-origin: top right;
-moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
-moz-transform-origin: top right;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: top center;
-ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
-ms-transform-origin: top right;
-sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
-sand-transform-origin top right;
max-width: 100% !important;
}
I'm having trouble with IE, the transforms are applied and are showing on screen
but when I click on the print button, the printed result is without the transforms applied to it.
(added screen in the media to see the effects, before printing)
It works fine with Firefox and Chrome
EDIT
Yes, I was testing on IE9.
Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.
-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.
See http://caniuse.com/#feat=transforms2d for more info if needed.
I has same issue but resolved by setting up media attribute to style tag as follows
<style type="text/css" media="print">
No need for fancy prefixes, just use normal transform to target MS IE!

Unable to CSS rotate iframe containing embedded Youtube video in IE

I want to show rotated embedded videos on my site. Im using iframes for displaying the videos. Rotating via css transform works well in all the browsers I've tested:
iframe{
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
However, for the specific combination of a youtube-video and IE browser (at least IE9), once the video loads, it is not rotated at all (although it is scaled to fit the rotated frame).
Take a look:
http://jsfiddle.net/uqYMX/
As is seen, other video sources like Vimeo is not a problem, even in IE. Thus, I'm guesing it has something to do with the contents of the youtube iframe.
Any help will be greatly appreciated!
Edit: I have tested it in IE8 aswell, using a filter transform, with the same results as in IE9.

CSS 2D transform with SVG background-image in Internet Explorer 9

I've created a left and right navigation button using only a single SVG background image and flipping it horizontally to get the other direction. This works fine in all browsers which support CSS 2D transforms except Internet Explorer 9. Basically the CSS looks like this:
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
I've created a jsFiddle which correctly looks like this in Internet Explorer 10, Firefox, Chrome, Safari etc.:
But actually looks like this in IE9:
I've included a greater-than sign to illustrate in which direction the buttons should point. And actually you can see, that IE9 applies the transform correctly to the text, but does the total opposite for the SVG background image.
If I change the SVG background image to a PNG, everything works correctly in IE9 however, see this jsFiddle.
I was unable to find any information on this. It seems to be a bug, as IE9 should support CSS transforms and SVGs as CSS background correctly.
I think you need to use the special syntax for IE:
div.nav-left {
-webkit-transform: scaleX(-1);
/*-ms-transform: scaleX(-1);*/
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/g2y86/1/
It doesn't look very sharp though, maybe there's a better way.
Edit
For flipping, try with this (note that both -ms-filter and filter lines are for IE) :
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-filter: fliph;
filter: fliph;
transform: scaleX(-1);
left: -50px;
}
http://jsfiddle.net/2cPYR/
From what I tried the scaleX-property indeed won't work with negative numbers on an svg background image. If you apply differnt colored borders to the div your are trying to transform you can see, that it actually gets transformed correctly, but the background image is not adapting to its container.
If you just want to solve your immediate problem, you can use -ms-transform: rotate(180deg);, the svg seems to know what it is supposed to do here.
I used filter: FlipV; to accommodate ie9
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9

Resources