This doesn't work with older browsers like IE
transform : scale(1,1.3); -moz-transform: scale(1,1.3); -o-transform: scale(1,1.3); -webkit-transform: scale(1,1.3);
Any workaround to make it work with older versions ?
This doesn't work with older browsers like IE
This is wrong. It depends on which version of IE you are suporting.
There is the -ms- prefix for IE9. IE 10+ can perfectly run css3 2D transform nativelly, using transform property.
//IE 9
-ms-transform: scale(1, 1.3);
//IE 10+
transform: scale(1, 1.3);
So you can make almost all 2D tranforms into IE9+. Info via Can I Use
But, of course, if you need to suport lower versions, like IE8, you have some workarounds, like this one.
Related
I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
I have built this awesome css only loader and everything is working fine except in Internet Explorer. For some reason, IE feels as if it needs to constantly shake. When it comes down to it all I'm doing is a simple keframe animation like this:
#keyframes loading
0%
transform: scale(1)
50%
transform: scale(1.2)
100%
transform: scale(1)
Here is my CodePen for the loader: http://codepen.io/MrGrigri/pen/zxWQdb
Also, here is the blog associated with it: http://codepen.io/MrGrigri/blog/responsive-loader/
In all of the other browsers its working like a champ...just not IE.
I'm testing it in IE Version 11.0.16 on Windows 8.1
Thanks for the help
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11.
I would like to be able to use calc() with transform:translateX in my CSS.
E.g.,
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc() not supposed to work in this context?
For what it's worth - I read here that you can "stack" translateX to acheive the same effect, and my testing seems to confirm this. I.e.,
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
I also know that it's possible to use left instead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
This:
transform: translateX(100%) translateX(-50px);
gets compiled at parse time, but calc expression here :
transform: translateX(calc(100% - 50px));
has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.
So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.
I just use them both with -ms- browser selector. It works perfectly.
-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));
Please check this DEMO in IE. The menu item name is not visible in IE. It is working perfect in all other browsers.
Any idea??
You were looking for rotation=3
http://jsfiddle.net/fTmxc/11/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
Its because you are using CSS3 transform to rotate the text.
IE 6,7,8 does not support it.
to make it work in ie9 you need to add following code
-ms-transform: rotate(-90.0deg);
you can check this website to make it work in older browsers
http://www.aquim.com/web-article-226.html
I have a table that I need to render some vertical text in one of the columns.
My understanding is that the following style should achieve the effect across browsers:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
This is OK in IE9 and Firefox, however this does not seem to work in IE7 or IE8... See:
http://jsfiddle.net/wzUfj/
Can anybody suggest a way to achieve this?
Thanks
In order to Rotate in those older browsers, you'll have to use Microsoft's proprietary filters:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALUE);
Replace Value with an integer, 0-4.
0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees
I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won't validate, if that's an issue.
CSS3 transforms - not supported on IE 7 and 8.
See: http://caniuse.com/#feat=transforms2d
IE8 and below do not support transforms.
According to this tutorial you can use writing-mode instead
As an extra gotcha, notice in IE9 the rotation can only be applied to block elements (such as paragraph and not span).
Here is a a fiddle