画像と注目のテキストのスポットを含む flexslider スライドショーがあります。フルサイトでは、左側の画像と右側の特集テキストエリア (フローティング) から始まります。これらのアイテムは両方とも、背景が黒の包含 div にあります。
画面が縮小されると、メディアクエリを介して画像が上に表示され、注目のテキスト領域がその下に表示され、両方が 100% になります。それらは相対的であるため、主要なテキスト領域のテキストの量に基づいて、その下のコンテンツの位置が変わります。
最初の例 - 最も高いスライド
以下の画像は、テキストが最も多い回転子の例です。ご覧のとおり、画像が上部を占め、緑色が下部を占めています。コンテンツがコンテナ全体を埋めるため、コンテナ div の背景も表示されません。
2 番目の例 - 短いスライド
この例は、iPhone で何が起こっているかを示しています。他のスライドは、コンテナーの高さに何らかの影響を与えています。実際のところ、何も表示されていなくても、リンクは灰色の領域でクリックできます。
この問題の原因は何ですか? ブラウザではなくiPhoneでのみ発生します。ブラウザでは、緑色の領域の高さに基づいてコンテナのサイズが変更され、コンテンツがシフトしますが、IOS では、ディスプレイであってもローテータの最大のスライドの高さが使用されます: なし。コンテナーの高さは auto で、overflow: hidden を使用しています。