28

tl; dr？以下のリンクに示されているメカニズムを入手して、AndroidChromeとデフォルトのブラウザでGPUアクセラレーションを使用して動作させます。

UPDATE 2（2014-01-13 13：25：30Z）：以下のbref.itのコメントによると、報告された動作はAndroid 4.4 KitKatの時点で修正されていますが、以下で説明する修正により破損します。ソッドの法則。

更新1（2012-11-01 17：54：09Z）：バグのある動作は、ピクセル値を返す変換された要素の計算されたスタイルによって報告される変換行列から推測できます。考えられる解決策への道を開くために、このためのModernizrテストを作成しようと思います。

コンテナをスライドさせて、全幅で水平に配置されたサブセクションを表示するメカニズムを開発しました。基本的にスライディングタブ。パフォーマンスを重視するものがたくさんあり、精巧なJavascriptが実行されているので、JSを最小限に抑え、CSSで純粋に文体的なことをできるだけ多く実行したいと思います。考えてみると、私はかなりうまくいったと思います—JSはラッパーの属性を変更するだけです。

（左）

http://jsfiddle.net/barney/VPJuq/ （モバイルデバイスはこれらのフィドルURLに/ show /を追加して、結果を自分で確認できます）

これがどのように機能するかについての一言：タブをinline-blocksとして扱うことで、指定してwhite-space: nowrap（最後のいくつかのルールの残りのコードは基本的にタブ間の空白を折りたたむ）、クリア/戻ることなく水平にスタックできるようにしますそれぞれが親の全幅を維持します。そこから、ラッパーに負の左オフセットを設定すると魔法がかかります。かっこいいね？

さて、少しコンテキストがあります。私が開発しているインターフェースは、ネイティブモバイルアプリケーションで実行されます。アプリケーションのコア機能は、UIWebViewを介した最先端のモバイル固有のテクノロジー（質問しないでください— NDA）に依存しています。問題のテクノロジーを現在サポートしているプラ​​ットフォームはAndroidです。

ここでの私の問題は2つあります。/lot/よりもtransform: translateスムーズに（translate3dさらにスムーズに）動作し、本当に望ましい、境界線が重要なポイントになります。特にAndroidでは、翻訳されていないトランジションが最新の状態ではまだ途方もなく氷河であると見なされます。最新のOSを搭載した電話。そのことを念頭に置いて、問題の核心は、Androidがに関連するときにボックスモデルを異なる方法で推測しているように見えることです。実例を示すために、これは同じもののベースバージョンです。これは前のフィドルと同じことを行い、translate3dをサポートするすべてのブラウザで動作します…</ p> （w / translate）leftmargin-lefttranslatetransform

http://jsfiddle.net/barney/EJ7ve

これをiPhoneで調べると（ここでも、を追加して/show）、iPhoneのフレームレートが向上していることがわかります。同じことがAndroidで実行されているFirefoxにも当てはまり、おそらくChromeとAndroidのデフォルトのブラウザでも同じです。ただし、ここではtranslateX、-100％のオフセットは、3つのタブすべてが占めるスペースを指しているため、ラッパーは次のようにスライドします。どのタブも表示されません。変換の割合は、変換される要素のフルボックスモデルに関連するものとして指定されているため、これは奇妙です。計算されたスタイルでは、ラッパーの幅が親と同じであると明確に記述されています（結果が示すように、3倍に引き伸ばされることはありません）。タブに対応します）。

これをバグとして説明できますか？

私の知る限り、この問題を推測して解決する純粋なCSS（メディアクエリ機能の検出、CSSベンダーのフォークまたはプロパティのハッキングを嫌うわけではありません）の方法はありません。実際、これと同じCSSメカニズムを機能させる唯一の方法は、AndroidのUA文字列をスニッフィングし、条件付きでさまざまなルールを適用することです。ユク！Android-WebKitのみのソリューションを作成し、他のすべての場所で機能を壊す場合は、事実上の動作を考慮に入れて、パーセンテージが分数を参照するようにすることができます。

（翻訳あり— Androidアップデートの場合：Android 4.4 KitKatでは不要で壊れます）

http://jsfiddle.net/barney/nFt5t/

これはUIブラウザー固有であり、CSSを作成する前に、グループ内のタブの数を事前に知っている必要があるため、理想的ではありません。しかし、これでは問題が完全に解決されるわけではありません。向きを変更すると（これは本当に奇妙です）、オフセットが他のブラウザで表示される仕様に合った動作に切り替わります。

また、実際のタブに翻訳を適用しようとしましたが、これは他の場所でも機能しますが、ルールを正しく選択して適用しても、Androidのブラウザーは効果をレンダリングしません。見知らぬ人と見知らぬ人：

（翻訳あり、Androidの理論に取り組んでいますが、Androidにはまったく取り組んでいません）

http://jsfiddle.net/barney/EJ7ve/9

クロスブラウザソリューションに関する洞察やアイデアは大歓迎です。

4

3 に答える 3

3

私は Android 2.3 を使用していますが、あなたが説明した正確な問題を引き起こすことはできません ( 「-100% は、3 つのタブすべてが占めるスペースを何らかの形で参照する」というコメントに関して)。ただし、他の問題が発生していたため、断続的/ジャンピーな遷移が発生し、実際には調査していませんでした。

会話のために、「ラッパー」の幅が 500px であると仮定します。

inline-block/nowrap テクニック (YUI ではあまり評価されていないレイアウト テクニック) を使用すると、3 つのタブ パネルが 1500 ピクセルの水平スペースを占有します。あなたの説明に基づいて、すべてのタブ パネルが一緒に 500 ピクセルの水平方向のスペースを占めていると考えるようにブラウザーを偽装する必要があります。私のフィドルをチェックアウトしてください。これは基本的にいくつかの負のマージンを使用し、私が動作すると思われる方法でブラウザーをだますように変換しますが、テストすることはできません。いずれにせよ、私の例は Android 2.3 で経験していた奇妙さを修正したので、どちらの方法でも使用することができます。

http://jsfiddle.net/ryanwheale/EJ7ve/29/

(および関連する CSS)

.tabs > * {
    width: 100%;
    margin-left: -100%;
}
.tabs > *:first-child {
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.tabs > *:first-child + * {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.tabs > *:first-child + * + * {
    -webkit-transform: translate3d(200%, 0, 0);
    -moz-transform: translate3d(200%, 0, 0);
    -ms-transform: translate3d(200%, 0, 0);
    -o-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}
.tabs > *:first-child + * + * + * {
    -webkit-transform: translate3d(300%, 0, 0);
    -moz-transform: translate3d(300%, 0, 0);
    -ms-transform: translate3d(300%, 0, 0);
    -o-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0);
}

注:上記の変換の代わりに相対位置を使用してみましたが、上記と同じ奇妙な結果が得られました。

于 2014-02-07T07:28:49.090 に答える
2

同様の問題が発生していました。

私にとって問題は次のとおりです。

* {
    box-sizing: border-box;
}

すべての要素にボーダーボックスを適用しました。これを削除すると、translate3d のパーセンテージが正しく適用されました。

于 2014-01-29T14:51:10.100 に答える
0

CSS が機能していない (そして機能しているはずである) 場合は、回避策が必要です。私の修正版を確認してください：

http://jsfiddle.net/EG9v8/1/

function makeCss(index){
    // Calculate the offset, given the tabs size
    var size = -$('.tabs').width() * index;
    // Create style for the given offset.
    var css = '-webkit-transform: translate3d('+size+'px, 0, 0);';
    css += '-moz-transform: translate3d('+size+'px, 0, 0);';
    css += '-ms-transform: translate3d('+size+'px, 0, 0);';
    css += '-o-transform: translate3d('+size+'px, 0, 0);';
    css += 'transform: translate3d('+size+'px, 0, 0);';
    return css;
}

$('.tabLinks a').on('click', function(e){
    e.preventDefault();

    var index = $(this).index();

    // Set the current style
    $('.tabs').attr('style', makeCss(index));
});
于 2014-02-05T19:11:49.220 に答える