I used this code:
codepen.io/egrucza/pen/PwbzPy
It seems to work in Chrome and Firefox, but not in Safari. I have added Modernizr, but that doesn't help me out. The triangles in Safari are visible without hovering and have an odd placement. The hover doesn't do anything.
Any quick fixes?
Most probably it's because you use transform:: rotate(-45deg) translateX(0); which requires vendor prefix on Safari. Try to add:
-webkit-transition: -webkit-transform 200ms ease;
-webkit-transform: rotate(-45deg) translateX(0%);
Related
I have a simple example (https://jsfiddle.net/5x9yLyxq) with two "tiles" that have a hover function (only css, no javascript).
The initial status of them is this
.tiles div{
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
and I then have a :hover css which looks like this:
.tiles div:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}
Problem: In IE (any, even Edge) the zoom animation "shakes" (looks really bad).
Does anyone know anyway to make the animation smooth (like in Chrome), can be a js library or css I do not care, just needs to be smooth?
Thanks
I've found this to be caused by the transform-origin property, which defaults to 50%.
If you change this to a value just over that, the shakiness (magically) stops. Try adding the following to your stylesheet:
transform-origin: 50.01%;
transform-origin is well supported for IE8 and up, Edge, and all other major browsers.
Here's a working example based on the JSfiddle originally posted by #DavidDunham.
You can try this
-ms-transform: scale(1.1);
for IE 9 or greater version.
CSS transitions don't work when hardware acceleration is activated (either via will-change or via translateZ(0)) and you are animating to or from scale(0) in chrome 45. (Version 45.0.2454.85 (64-bit))
(Firefox 40 works with will-change, but not with translateZ(0))
DEMO: http://codepen.io/zapdev/pen/ojbdVb
(enable hardware acceleration and the hide animation stops working)
My current work around:
.hide {
transform: scale(0.0002);
opcacity: 0;
transition: transform 400ms, opacity 0ms 400ms;
pointer-events: none;
}
EDIT:
I am on MacOS X and my WebGL Renderer is "Intel Iris Pro OpenGL Engine"
Also: Chrome 47.0.2511.0 canary (64-bit) works (like Firefox 40) with will-change, but not with translateZ(0). Looks like will-change is generally the way to go for hardware acceleration.
The browser doesnt know how to read transform override.
when you use transform:translateZ('value'); you are override the scale.
for it to work you need to initial all div with scale and translateZ, and this way it will work in all ways.
VIEW DEMO
div{
transition: transform 400ms;
transform:scale(1) translateZ(0);
}
div:hover{
transform: scale(1.4) translateZ(0);
}
div.hide{
transform: scale(0) translateZ(0);
}
I have a trouble, when I need to rotate big image(about 3000 - 5000px), that already scaled to 0.1 - in Firefox it goes not smooth. I think, it depends of Firefox render engine, because in Chrome, Opera and Safari everything is ok.
How do you think, is it possible to do the same in FF?
Here is jsfiddle (you need to hover on circle in FF).
.item {
width: 3000px;
height: 3000px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
transition: all 5s linear;
}
.item:hover {
-webkit-transform: rotate(100deg) scale(0.1);
transform: rotate(100deg) scale(0.1);
}
Check for image-rendering css property :
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Unfortunately default settings are the most optimized on Firefox, and as you said this task is handled by the browser itself, so there is pretty much nothing you can do.
I'm having a bit of trouble working with CSS transitions on phonegap. We're transitioning a transform: translate3d property to have content views slide in and out of view, as well as sliding to reveal a side bar.
Here's an example of the webapp (note the transitions work in browser):
http://ferriesapp.ca/app/
You will see that the transitions work perfectly in browser both on phone and on desktop. But as soon as I "phonegap" it the transitions just don't render. The final position shows up, for example if I hit a departing list item it will show the corresponding arrival list items. But for some reason the animation just doesn't happen on phone gap. The only exception is that it works on iOS7 when put through phonegap, but not iOS 6 or any version of Android.
Here's a small snippet of the code:
Here is what the CSS on the sliding element looks like
#depart-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
}
Here's the animation class:
.animate {
transition: transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: -moz-transform 0.2s ease-out;
transition: -ms-transform 0.2s ease-out;
transition: -o-transform 0.2s ease-out;
}
And finally the JS that calls it (note this is not the whole function):
$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"});
If anyone has any suggestions they would be hugely appreciated
Thanks!
P.S. I know there is a CSS3 #keyframes rule that works quite well, but I'd rather avoid that for simplicity of code
Your statement about it working on iOS7 but not on iOS6 leads me to believe that this is happening due to your translate3d statement.
I am assuming you put in this line to enable hardware acceleration -
transform: translate3d(0,0,0);
However, there are several reports that this does NOT infact trigger hardware acceleration in iOS 6 devices.
In the article I quoted, the author mentions that using any one of the following commands, will trigger hardware acceleration.
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
I've got this transition working smoothly in chrome and safari but it is not working in firefox. In firefox it does not zoom in, but it shows the enlarged image instantly. Maybe somebody knows what's wrong...
I've made a jsfiddle for it: http://jsfiddle.net/WYfZz/
ul.polaroids_portfolio li a:hover { -webkit-transform: scale(1.75); -moz-transform: scale(1.75);
-ms-transform: scale(1.75);-o-transform: scale(1.75);transform: scale(1.75);
position: relative; z-index: 5; }
You have no -moz-transition: -moz-transform .15s linear; on ul.polaroids_portfolio a, you just have the -webkit- version.
See http://jsfiddle.net/WYfZz/5/
Also, you shouldn't forget to also put the unprefized version for transitions at the end as well (both transitions and transforms will be unprefixed in Firefox 16/ Opera 12.5/ IE 10). Same goes for box-shadow (you'd be better off using the unprefixed version instead of the prefixed ones; I can understand using the -webkit prefix to support Android or Blackberry, but Firefox supports the unprefixed box-shadow since FF4)