特定のイベントが発生したときに移動する要素を持つページがあります。私はCSS3トランジションを使ってスムーズに動かせます。 Firefox、Chromium（Google Chrome）、Safari（Windows）、Android Browser（2.3.7）、Android用Firefox Mobile（a.k.a. Fennec）でうまくいきます。 Internet Explorerでは、トランジションプロパティを無視し、要素を突然期待どおりに移動します。モバイルSafariでCSS3の遷移がCSSのプロパティの変更を中断しますか？
モバイルサファリでは機能しません。 -webkit-transitionが定義されている場合、要素はまったく移動しません。私は1st gen iPod Touchでテストしているので、これは古いバージョンでのみ問題になるかもしれません。私のiOSバージョンは3.1.3（7E18）です。
JavaScriptアニメーションエフェクト（jQuery経由）は問題なく動作しますが、上記のいずれのデバイスでもスムーズに動作しません。私はむしろCSS3のソリューションを使用したいと思います。
これは新しいiOSデバイスでも問題ですか？
問題は文書化され説明されていますか？もしそうなら、誰かがリンクを提供できますか？
回避策はありますか？
問題を示す簡単なテストページを作成しました。私が言ったように、-webkit-transition行を削除しない限り、要素はMobile Safariで移動しません。
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<style type="text/css">
#box {
border: 3px outset gray;
font-size: xx-small;
color: silver;
background-color: black;
position: absolute;
width: 50px;
height: 50px;
top: 100px;
left: 220px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
a {
display: table-cell;
text-align: center;
vertical-align: middle;
color: black;
text-decoration: none;
width: 100px;
height: 100px;
background-color: silver;
border: 2px outset gray;
}
</style>
<script type="text/javascript">
var box;
window.onload = function(){
box = document.getElementById("box");
}
var getTop = function(obj){
var curtop = obj.offsetTop;
obj = obj.offsetParent;
while (obj){
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
return curtop;
};
var moveUp = function(obj){
var curtop = getTop(obj);
obj.style.top = (curtop - 20) + "px";
return false;
};
var moveDown = function(obj){
var curtop = getTop(obj);
obj.style.top = (curtop + 20) + "px";
return false;
};
</script>
</head>
<body>
<div id="box">
<p>This is the box.</p>
</div>
<a href="#" onclick="return moveUp(box);">Move Up</a>
<a href="#" onclick="return moveDown(box);">Move Down</a>
</body>
</html>
ありがとうございます。 （...我々はすべての憎悪のIE6 :)
は、私はちょうどモバイルフレームワークのカップルをチェックする理由は、新しいソフトウェアの修正古いバグや彼らのサポートマトリックス -
IOS 3はcss3トランジションをサポートしていますか？ –
@HBellamyこれを理解しようとしながら、ブラウザがCSS3の遷移をサポートしているかどうかを調べる方法を探しました。答えは 'if（" document.body.styleのWebkitTransition "）をテストすることです。 ref：[ブラウザのCSSプロパティサポートを確認]（http://stackoverflow.com/q/1342994/166560）。モバイルSafariにはサポートがあると言われています。また、それがサポートを持っていなかった場合、IEと全く同じようにプロパティを無視する必要があります。 –