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
Related
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
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!
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.
I am trying to create a "cube" effect where i can toggle between three objects and create the feeling of turning a cube.
Works fine with 2 sides, but i am stuck trying to add a third. Can someone please explain why the third site floats away?
I guess i am doing something wrong with item-3? But i just can't figure it out
.item-1{
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.item-2{
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.item-3{
-webkit-transform: rotateX(-180deg) translateZ(-50px);
transform: rotateX(-180deg) translateZ(-50px);
}
Live example:
http://jsfiddle.net/esbeka9t/
There you go:
Just change your .item-3 class like this:
-webkit-transform: translateZ(-50px) rotateX(-180deg) translateY(200px);
transform: translateZ(-50px) rotateX(-180deg) translateY(200px)
It seems your .items are positioned relative to each other. Giving .item a position: absolute, a fixed width and changing the translate values just a bit on your .item classes should solve the issue. Here is a modified version of your example to illustrate this.
The platform were I work does not support #keyframes because of security reasons with the #.
My question is if I can replace it with some other css trick.
For example I have this code:
.cubo {
animation:giro 25s infinite linear;
}
#keyframes giro {
0% {transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(1080deg) rotateY(360deg);
}
}
Can I replace it with transitions or transforms to avoid using the #? (no javascript supported either).
You could instead make it a transition by multiplying the transition duration, rotateX, and rotateY values all by a common factor x and applying the transition class on page load. In my example I multiplied them by 40, but you can go as high as you want but I wouldn't go too high because the processor might overload at some point and break the page. This runs for 1000 seconds, not many people will stay on a page past that
Here is a live demo of that approach
/* CSS */
.cubo {
/* ...Your other code... */
transition: all 1000s linear;
}
.animate {
-webkit-transform: rotateX(43200deg) rotateY(14400deg);
-moz-transform: rotateX(43200deg) rotateY(14400deg);
-o-transform: rotateX(43200deg) rotateY(14400deg);
-ms-transform: rotateX(43200deg) rotateY(14400deg);
transform: rotateX(43200deg) rotateY(14400deg);
}
/* Javascript (ran on page load) */
document.getElementsByClassName('cubo')[0].classList.add('animate');