Mobile Safari shows the correct version of the UI for a split second.
After that the translated 3d surfaces cut into each other.
.top {
background-color: #a58855;
transform: translateY(-50px) rotateX(90deg);
-webkit-transform: translateY(-50px) rotateX(90deg);
}
Please see full code on jsbin
Any ideas how to fix the problem? I tried adding custom z-indexes and z-translations, but nothing seems to help. After half a second image "corrects" itself to the broken state.
I am using CSS to display some spinning coins as shown in this fiddle: http://jsfiddle.net/6gdrQ/1/
Some of the relevant code is as below:
.coin {
background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
-moz-transform-style: preserve-3d;
[...]
}
.coin:before {
background-image: url("https://www.intnumis.com.au/images/product_gub257zcoy_201310GoldProofHoleyDollarDumpREV_medium.jpg");
-moz-transform: translateZ(-5px);
[...]
}
and I rotate with:
-moz-transform: rotateY(1080deg)
Opera, Safari and Chrome are working just fine, but Firefox always shows the coin:before image on top when the coin is not spinning. When it is spinning everything works fine, but maybe 1s after the animation stops, it seems the div re-renders and for any rotated coins instead of seeing the before image, the back of the other image is shown.
I'd be grateful for any help or suggestions.
Answering my own question instead of deleting it incase anyone has a similar problem.
I need to add a perspective unit, for example like this:
body {
perspective: 800px;
-webkit-perspective: 800px;
}
And it works fine in Firefox as well.
Updated fiddle here: http://jsfiddle.net/6gdrQ/3/
I have a trouble in Chrome with the rotated content which has style -webkit-transform: rotateY( 180deg ).
If the content has white background color, it blinks, but if it has background-color: transparent, blinking disappears during the rotation. It's probably a bug which I try to work with but sometimes this way leads to nothing.
Is there any appropriate method to solve this problem?
The situation is like that card flip but I have more complicated mark up for the cards. Here, for the card number 2 which is faced back the style is -webkit-transform: rotateY(180deg) and for other card the style is empty. For the card number 1 I wrote -webkit-transform: rotateY(0deg) what removed blining during the css rotation -webkit-transition: -webkit-transform 1s .
First of all,I am doing a html5 webapp on iOS, especially iPad.when touchmove,the div should move with my finger together,I used to change the left value to make this effect,but it seems not smooth enough ,so I used translate3d to do it,it seems great!
And then,I just found the strange flicker happend,there are white flicker or flash in there several time when finger move the div.by the way,after moved once,the flicker is dispear.
So,I check a lots of functions which include:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
But no one works except change the flicker color to grey=.=
So,this is my question.(iOS 5.01)
you should check the children, try giving them
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
I had more strange issue when copies of input elements were displayed as artifacts all over the next content after scrolling down and up.
And couple lines of CSS saved the day (actually days of struggling :)
Make sure you use such CSS for your scrolling container and all children inside of it
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safari as far as I can tell.)
Here's a jsFiddle that shows what I'm talking about:
http://jsfiddle.net/EJUhd/
Does anyone know why this occurs and how I can prevent it?
I was struggling with a similar issue.
For me, random links throughout the page became apparently bold (clearly something to do with OSX and anti-aliasing in Safari, as Chrome (in windows 7 and OSX) as well as the same version of Safari in Windows worked fine.
The solution is not obvious, and depending on what you are doing might not be optimal, but adding this line of code fixed the issue:
-webkit-transform: translateZ(0);
This basically triggers the GPU to do animation, and the text no longer had artifacts in my site. Do note that it's not always appropriate to use it, as it may use more battery life and use more resources. Sometimes however, it uses less, so basically check the performance when you add it.
You add this to the normal state not the :hover animated state.
img { -webkit-transform: translateZ(0); }
As opposed to on the:
img:hover { /* not here */ }
The other very positive side effect is that depending on the animation you are doing, it might be smoother through the GPU. So you won't get the choppy animation you mention in your follow up post. In my case, the animation was more seamless in safari. I was doing a 120% scale and 5 degree rotation of an image with some box-shadow appearing at the same time. In my situation, it did not reduce CPU usage unfortunately.
There is no more relevant topic I've found for a problem I had, but that's related to mentioned above issue. So, might be helpful for some one.
In two words: I have some container (popup), some element inside.
Appearing goes the following way: container background is fading up to dark via opacity and element inside is scaling up (like coming closer to us from behind). Everything works great everywhere but not in Safari (Mac/Win/iPhone). Safari "initially" shows my container, but it blinks some strange way (tiny short flash appears).
Only adding -webkit-transform: translateZ(0); (to container!!!) did help.
.container {
-webkit-transform: translateZ(0); /* <-- this */
}
.container section {
-webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */
-webkit-transition: -webkit-transform .4s, opacity .3s;
opacity:0;
}
.container.active section {
-webkit-transform:translateZ(0) scale(1);
-webkit-transition: -webkit-transform .3s, opacity .3s;
opacity:1;
}
But speaking of the transitions, there was also the following part of code:
.container {
...
top:-5000px;
left:-5000px;
-webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;
}
.container.active {
-webkit-transition: opacity .5s;
top:0;
left:0;
width:100%;
height:100%;
}
considering, that I want to show/hide the popup using only css switching (and also to make it disappear nicely instead just "display:none").
so, somehow on appearing Safari (obviously) was inheriting transition properties besides "opacity" even as I've overloaded them with only -webkit-transition: opacity .5s;
so, adding the following solved the problem:
.container {
...
-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;
}
I can't begin to tell you why it's doing this, but Safari isn't changing your text color, it's anti-aliasing the text differently while the transition is in motion. The text edges get smoother, and the text itself becomes thinner. This is extra obvious if you zoom in on the fiddle with accessibility tools. At some smaller sizes, the shading around the button next to the form text shifts too. (Is it possible that Safari is redrawing some things, or reorienting them on a sub-pixel level during the transitions ? Somebody explain this please, it's driving me nuts now!)
Because I have no real idea why it's doing this either, these might not be the best solutions:
Depending on what you're transforming, replacing the css transform with a javascript animation will probably fix it.
For example in your fiddle, the problem also occurred with a scale transformation, but not with a similar jQuery animate function.
There seem to be some shades and styles where the anti-aliasing change is less obvious (at least in the fiddle), so you could also try styling the placeholders and other effected text differently.
(This thread may help with styling the placeholders, if you go that route: Change an HTML5 input's placeholder color with CSS )
Thanks to the identification of anti-aliasing above, as well as help from the articles below, I modified my code to include translate3d(0,0,0) and the problem disappeared:
-webkit-transition-duration: .17s, .17s translate3d(0,0,0);
The transition isn't as smooth as it once was but that's a subject for another question.
Wonky text anti-aliasing when rotating with webkit-transform in Chrome
http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/
http://www.webkit.org/blog/386/3d-transforms/
i had the same problem, while a transition some text became antialiased. this happen only in anchor text that are positioned relative e with z-index inside an element positioned and with z-index itself.
if i remove all position and index the problem disappear.
There is a similar problem using transition and translate3d. Sometimes any element on the page with :hover styles shows its hover behavior. I have this problem using a slider. Put the -webkit-transform: translateZ(0); to the :hover element and its behavior is normal.
For rotation() maybe it's fine, but for scale() It didn't worked the -webkit-transform: translateZ(0); formula.
I used :
-webkit-font-smoothing: antialiased;