I think I found a bug related with percentages on Safari in the animations. I would like to know if really it is a bug or a Safari custom.
Explanation of the bug:
On Safari or iOS when you start an animation with a translate with percentages, the position is wrong and the animation is shown in another place.
In the next example, the square should not move because the transform is the same and it should start with a 10% 10% "margin" of its size. The bug occurs when it is adding via JavaScript after some time (like 500 ms).
If you see the bug, you will see a jump from 0 0 to 10% 10% in Safari and iOS.
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500); div {
background: red;
width: 200px;
height: 200px;
-webkit-transform: translate(10%, 10%);
-webkit-animation: 1s bugAnimation;
}
@-webkit-keyframes bugAnimation {
from {
-webkit-transform: translate(10%, 10%);
background: blue; /* To see the animation */
}
to {
-webkit-transform: translate(10%, 10%);
background: red; /* To see the animation */
}
}Possible solutions:
- Changing the percentage values by viewport units or another.
Obviously that options is not valid for all cases because I need the percentage but it could be a small solution for now if I know the size of the div (vw, vh, px...).
Do somebody know this bug?
Tested on Safari 10.1.1 and iOS 9.3.1 (with webview).
EDIT: Really I need the translate2D because I am rotating a DIV in the center of the page and the size is unknown, an example:
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500); div {
background: red;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-webkit-animation: 1s bugAnimation;
-webkit-transform-origin: center center;
}
@-webkit-keyframes bugAnimation {
from {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
}
to {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
}
}