I am trying to apply a transform (scale + translation) to a div in css:
.my-div {
-ms-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
-webkit-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
-moz-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
-o-transform: scaleX(40%) scaleY(40%) translateX(-20%) translateY(-20%);
transform: scale(40%) translateX(-20%) translateY(-20%);
}
Although this works in chrome, it doesn't work in safari. Inspecting the element, you see that -webkit-transform and transform should apply, but I see warnings. The warning says "Unsupported property value."
I've tried percentages & decimals, scale with one & two values, translate split into X and Y or combined into a single translate. Nothing works. The documentation states that this should work.
Any ideas?
Upgrading from Safari 15.1 to 15.5 solved the problem. Thanks everyone!
I upgraded to 15.5 and it solved the problem.
just use this one:
.my-div {
transform: scale(40%) translateX(-20%) translateY(-20%);
}
it must be work
Related
I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!
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 :)
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?
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
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