0

今日、私は非常に奇妙な問題に直面しています。

約 10 個の複雑な要素を含む div を作成しました。これらの要素には、CSS3 トランジション、アニメーション、翻訳を含むいくつかの div が含まれています。

外側の div は非常に広く、スクロール コンテナー内にあります。

<div id="container">
    <div id="scroller">
        <div class="animated-element">
            [...]
        </div>
        <div class="animated-element">
            [...]
        </div>
        [...]
    </div>
</div>

私は現在、コンテナ内でスクローラーを移動するために jQuery を使用しています (プレーンな JSS も試しました)。

document.getElementById('scroller').style.left = "-150px";
// or
$('#scroller').animate({"left" : "-150px"}, 500);

奇妙なことが今起こっています。要素をスクロールした後、何も変わりません。最初は、スクリプトのタイプミスか何かだと思いました。

しかし、その後、カーソルをスクローラーの上に移動し、カーソルを前後に移動している限り、(JS を使用して) 加えた変更が表示されていました。

再レンダリングについて多くのことを検索しましたが、有用なものが見つかりませんでした。

私はこの種のスライダーを何千回も作りました。これが、この問題が私をとても混乱させる理由です。

明日オフィスに戻ったら、フィドルを組み立てようと思います。しかし、誰かがアイデアや解決策を持っていることを願っています。

編集 2

これがフィドルです。

perspective perspective-origin と position:relativeプロパティを単一の s から削除すると、スクロールが機能することがわかりました.moreitem。完全なコンテキストでは、何かが中断しているように見えます。カットアウトはとにかく機能します。

編集1スクローラーのCSSは次のとおりです。

-webkit-box-align:center;
-webkit-box-orient:horizontal;
-webkit-box-pack:start;
display:-webkit-box;
height:100%;
position:absolute;
4

1 に答える 1

0

Safari では、動的コンテンツが再レンダリングされないという不具合が発生しがちです。昨日、CSS3列でこれに遭遇しました。

これが問題の核心なのか、それとも実際の問題から気をそらす小さな不具合なのかはわかりませんが、アニメーションの後に強制的に再レン​​ダリングしてみてください:

$('.morecontainer').toggle().toggle();

または、アニメーションの一部として、 と の下にある透明な div を移動 (または他の方法でアニメーション化) することができposition:absoluteますz-index:-1。.morecontainerこれにより、アニメーションの各ステップで再レンダリングが強制される場合があります。

于 2013-02-27T14:15:05.827 に答える