I found a strange problem. During animation, dark colors are flickering.
codepen
Partially -webkit-backface-visibility: hidden fixes the problem, but it makes font tighter and brighter.
Problem occurs on chrome and edge. Firefox works fine.
Try adding the following code to your span elements.
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
This should cover all browsers as far as I've tested.
Related
Couple months ago I write a pen like bokeh bubbles that create perspective tunnel.
It runs fast in actual Crome and Opera.
here is pen on codepen:
http://codepen.io/anon/pen/wGrbPJ
And seems like the animation jitters too much in IE11 and FireFox 46.
I thought that there should be some workaround to increase draw speed like:
backface-visibility: hidden;
Or applying 3d hardware acceleration, like add:
* {
-webkit-font-smoothing: antialiased;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
But this doesn't give much boost.
Maybe someone is expert in 3d transitions in css who know what causing such jittering in IE and FF, and can point me to where to look at?
Sincerely!
Vitaly.
I am trying to move a search box widget on a WordPress page by using translate (since it be put there by default). The code below works on all of the major browsers except Safari both the desktop and mobile versions. The code is below:
input#s {
-ms-transform: translateY (85px);
-webkit-transform: translateY (85px);
-moz-transform: translateY (85px);
-o-transform: translateY (85px);
transform: translateY(85px);
z-index: 1000;
position: relative;
display: inline-block;
}
Thanks for any help.
Is there a reason you have spaces after translateY on all of them but the non-prefixed? That's what I'd venture the issue is.
It's reading the translateY but you have "no value" attached to it due to the spaces.
I have a div that I'm animating and I'm using the good old translateZ hack to force hardware acceleration:
#random{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
Everything works fine in all browsers, except in safari 5.1. In safari the whole div just does not render, you can mark the text etc, but it's transparent.
Removing the transform solves the problem but is there any other solution?
It should work :
http://caniuse.com/transforms3d
If not maybe try sandpaper plugin:
SANDPAPER
https://github.com/pbakaus/transformie
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
I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.