7

移動せずにスクロールすると、画面の下部に固定位置の div があります。ただし、Safari では、この div は完全に配置されているように機能し、残りのコンテンツと共に上下に移動します。[Inspect Element] をクリックすると、視覚的な (実際の?) 位置ではなく、プログラムされた (目的の) 位置が強調表示されます。

この問題をフィドルで再現することはできません。これは、Chrome、FF、または IE (10+) では発生しません。

Here's a screenshot of the difference between the visual (the character count box) and the programmed location (the highlighted area).

ファントム div のスクリーンショット

There are more actual layers of css and html on top of these, but here's the immediate code:

html simplified

<article class="parent">
  <article class="inner-wrapper">
    <div id="counter">
      Character Count: <span class="tally">*javascript calculation*</span>
    </div>
  </article>
</article>

scss

article.parent {
  max-width: rem(640);
  margin: 0 auto rem(30) auto;
  padding: 0 rem(10);

 #counter {
   position: fixed;
   border: #888 solid 1px;
   bottom: 130px;
   left: 10px;
   border-radius: 5px;
   padding: 10px;
   background: rgba(255, 255, 255, .8);
   font-size: .8em;
   min-width: 150px;
 }

}

How can I make this div behave in Safari, so that the visual sits on top of the programmed location?

4

2 に答える 2

7

バグが見つかりました:

親要素に次の 2 つのルールを含めることで、使用していたハードウェア アクセラレーションの「トリック」にバグをたどることができました。

transform: translateZ(0)
perspective: 1000

これら 2 つのルールを削除することで、要素は期待どおりに動作するようになりました。この問題に関する詳細情報: translateZ(0) に対する CSS パフォーマンス

ボーナス バグ修正: HTML 本文でこれらのルールを削除すると、PhantomJS/Poltergeist テストでさまざまな要素の重複の問題が発生しました。どうやら、PhantomJS はそれ自体で要素を適切に移動しないようです。これらのルールはテスト用にのみ含めましたが、現在はすべて正常に動作しています。

元の解決策:

親コンテナーからカウンターをプルすることで、この問題を修正できました。

<article class="parent">
  <article class="inner-wrapper">
    ...
  </article>
  <div id="counter">
    Character Count: <span class="tally">*javascript calculation*</span>
  </div>
</article>
于 2014-10-07T19:07:00.070 に答える
-1

このフィドルを試してください

http://jsfiddle.net/sosypjLg/1/

#counter {
position: fixed;
bottom: 0;
width: 100%;
}

このCSSスタイルが必要です

于 2014-09-29T20:52:26.323 に答える