"Translation" of Transform from FireFox to IE10 - css

I do have the following style in FF:
opacity: 1;
transform: translate3d(-95.1115px, -25.2431px, 0px) scale(0.7047);
transform-origin: 140.107px 70.2427px 0px;opacity: 1;
I know that it is not working in IE10/IE11 out of the box.
I already found out, that the scale needs to be multiplied with 10
transform: scale(7.047);
to have the same effect.
But the other transforms, I have no clue how to convert them to IE10/11.
Any Ideas?

Related

Zoom property in CSS works with Chrome but not with Mozilla

For a particular case, I have to zoom out on the whole body of a web page.
So I took the time to search the various possible solutions but I'm faced with a compatibility problem with the zoom CSS property that doesn't work on Mozilla. I quickly encountered the scale property but it doesn't offer the same desired result, i. e. the equivalent of a conventional zoom out (CTRL -).
Do you know an equivalent technique that works on the main browsers ?
Thank you in advance for your feedback !
https://caniuse.com/#search=zoom
This will tell you what is compatable for each browsers. Not a solution but this is why it's not working in moz.
Just a little searching comes up with using this
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
-o-transform: scale(2);
-o-transform-origin: 0 0;
-webkit-transform: scale(2);
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
That should do what you're after :)

css svg animation works, but not when drawn on canvas, only on Firefox

I am using css to do svg animations. The goal is the make a character move on a 2d isometric grid using js.
The svg in then drawn on canvas.
My issue is, while everything works fine on Chrome :
https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-chrome.gif
It doesn't work at all on Edge, which was to be expected, as Edge doesn't support svg css animations :
https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-edge.gif
However, interestingly enough, while css svg animations seem to work on Firefox, once I draw the svg on a canvas, it stops working and gets stuck on the first frame :
https://raw.githubusercontent.com/Lunacie/SquishySlug/master/screenshots/walk-firefox.gif
Here is a code excerpt of how I have been doing the animations :
#leg_x5F_back_x5F_top {
transform-box: fill-box;
-webkit-animation : leg_back_top 1.5s linear infinite;
animation : leg_back_top 1.5s linear infinite;
}
#keyframes leg_back_top {
0% {
-webkit-transform-origin: 100% 40%;
transform-origin: 100% 40%;
-webkit-transform: translate(10%, -10%) rotateZ(-10deg);
transform: translate(10%, -10%) rotateZ(-10deg);
}
[...]
80% {
-webkit-transform-origin: 20% 40%;
transform-origin: 20% 40%;
-webkit-transform: translate(-20%, 0%) rotateZ(30deg);
transform: translate(-20%, 0%) rotateZ(30deg);
}
}
So my question is : Is this behaviour normal and to be expected from Firefox? Maybe css animations drawn on canvas are not supported ? Or am I doing something wrong ?
Thank you in advance for your help.

GPU Acceleration of animated and blurred content

Question: Why does my CPU register ~30% when blur is applied versus ~6% when no blur is applied to an animated object?
Details:
I have a set of randomly generated items on a page that have a CSS animation assigned (in a CSS file) and randomly generated values for width, height, and importantly, blur, applied inline.
CSS file styles looks like:
animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translateZ(0);
width, height and blur are applied inline via style attribute.
<div class="foo" style="width:99px;height:99px;
filter:blur(2px);
-webkit-filter:blur(2px) opacity(0.918866247870028);
-moz-filter:blur(2px) opacity(0.918866247870028);
-o-filter:blur(2px) opacity(0.918866247870028);
-ms-filter:blur(2px) opacity(0.918866247870028);"></div>
With the blur enabled my CPU usage is ~30%. When I disable the blur, CPU usage goes down to ~6%.
What's happening here? Is chrome only able to GPU accelerate when no blur is applied? If so, why?
Update 1:
The animation rise looks as follows:
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-1000px);
}
}
I don’t think the blur is actually causing your issues, it just seems to make it more noticeable than before. The problem is that the transform: translateY in your animation is overwriting the transform: translateZ(0) you’re using to force GPU acceleration.
This is a timeline recording for the the code you’re running right now, notice how there’s all this activity on the main and raster threads:
Now compare this to a recording where I applied will-change: transform to the .foo:
No activity on the main and raster whatsoever.
There’s two steps to applying this fix:
Apply will-change: transform to .foo. This will let the browser know you intend to change that property and have it render that element on the GPU to account for this.
No versions of Edge and IE support will-change at the moment. Therefore we’ll use transform: translate3d(0, -1000px, 0); in the animation to force GPU acceleration. Note this is a hack, so we’ll detect support for will-change and use transform: translateY in browsers that support it.
Final code:
#keyframes rise {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, 1000px, 0);
}
}
#supports (will-change: transform) {
#keyframes rise {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(1000px);
}
}
}
div {
width: 100px;
height: 100px;
background: #f00;
animation: rise forwards 2s linear infinite;
will-change: transform;
}
See here for a working version: http://jsbin.com/mosuvikoto/edit?html,css,output
Don't blur it in inline styles. Put your blur in the style file.

In Chrome 'transform-origin' is invalid?

My Chrome console returns Invalid CSS property name to a transform-origin CCS attribute as the site loads even though it works and I have a -webkit- prefixed version.
The target CSS looks like this:
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
Is it really an issue?
I've found the origin of my issue.
The problem is that -webkit- browsers don't accept the transform-origin attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin).
So, for example, if I use something like this, -webkit- assumes it is wrong:
#divOne{
transform-origin:50% 50%;
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); }
to{ transform: translateX(0%) rotateY(0deg); }
}
It is wrong because the origin attribute is detached from the transform that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.
It should be something like this to be correct:
#divOne{
animation:jump 1s ease both;
}
#keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}
Where both transforms are together on the same element.
The answer to your question in simple terms is 'NO'. It is a perfectly valid property. There must be something else that's causing the error.
Read this:
https://docs.google.com/document/d/1UsKm0ywILw9cuTRYlkhqMYTdzNcih6sO15u1eCzGgP8/edit?pli=1#
and this
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility

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