10

複数の iPhone および iPad で iOS 7 にアップグレードして以来、Web サイトの UI の一部に非常に奇妙な現象が発生しています。

添付された画像のピンクのボックスは、絶対配置された親内にあり、その中に絶対配置された 2 つの白い div があり、それぞれ異なる不透明度があります。ピンクの円は、border-radius が円になるように設定された div です。このレイアウトには画像がまったくありません。

何らかの理由で、ブラウザはピンクの div を断続的に伸ばしていますが、それを引き起こす原因は何も考えられません。また、必要に応じてこの効果を実現する方法もわかりません!

ブラウザのバグだと思いますが、直し方がわかりません。

すべてが本当に簡単で、これを引き起こすものは何もないため、コードは含めていません (実際、iOS6 で動作します)。誰かがこれを以前に見たことがあることを願っていますか？

何か案は？

CSSの問題

更新 cimmamon によるコメントへの応答として、コードは次のとおりです。

<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
    <div class="period3"></div>
    <div class="period2"></div>
    <div class="period1"></div>
    <div class="nodeline colBk">
        <div class="node colBrd"></div>
    </div>
</div>
<div class="inner">
    <div class="group first">
        <div class="branch colBk"></div>
        <a class="story">
            <div class="strip colBk"></div>
            <div class="caption">
                <div class="text">
                    <p class="title">Test</p>
                </div>
            </div>
        </a>
    </div>
</div>

「期間」コンテナーと子に適用される CSS は次のとおりです。

.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }

これは非常に奇妙なバグです。私が見ることができる CSS には、これを引き起こす可能性のあるものは何もありません。

正しくレンダリングするために追加できる CSS に関する提案はありますか? 高さだけで十分だと思うかもしれませんが、明らかにそうではありません。

ここでフィドル

4

4 に答える 4

11

私はこの問題を抱えていましたが、現在は Safari 7 でも発生しています。

これが私の場合に起こっていたことの単純化されたバージョンです

HTML

<ul>
  <li>
    <a> Some text </a>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

次に、HTMLを作成する要素を追加するjavascript（私の場合はブートストラップツールチップ）がありました

<ul>
  <li>
    <a> Some text </a>
    <div style="position: absolute" class="tooltip"> Some content here </div>
  </li>
  <li>
    <a> Some  other text </a>
  </li>
</ul>

全体が新しい div の上にul引き伸ばされる前に、新しい div が一時的に表示されていました。

これは safari のバグに違いありませんが、挿入された div に次の CSS を追加すると回避策として機能します。

.tooltip {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

これにより、挿入された div が新しい複合レイヤーで強制的にレンダリングされ、Safari の失敗を防いでいるように見えます。

解決策にたどり着くにはこれで十分だと思いますが、そうでない場合はお知らせください。この答えをもう少し具体化できます。

于 2013-10-23T11:18:19.097 に答える
2

使用してみてくださいbackface-visibility：

-webkit-backface-visibility:hidden;

それは私の見出しを伸ばす原因となりました、いったん取り除かれると、世界は今も昔も幸せな場所です

iOS 6 & iOS 7 & Android 4.2 + でテスト済み

于 2013-12-20T15:42:01.903 に答える
1

追加の合成レイヤーの作成を回避するもう 1 つの明らかな回避策はperspective、GPU 合成コンテキストにある要素に追加することです。(この場合、それは の要素opacityです。) を使用して 3D 空間に物を配置している場合translate3d、これは視覚的な影響があり、効果的な回避策ではない可能性があることに注意してください。

.period1, .period2, .period3 {
  -webkit-perspective: 1px;
  perspective: 1px;
}
于 2013-11-11T18:47:07.767 に答える
0

おそらくこれで問題が解決します：

高さを追加:17px; あなたのcssは次のようになります

.node {
    background-color: #F9F9F9;
    border: 6px solid #DD545C;
    border-radius: 50% 50% 50% 50%;
    bottom: 0;
    height: 17px; /*new*/
    left: 50%;
    margin-left: -15px;
    position: absolute;
    width: 17px;
}

jsフィドル

于 2013-10-04T09:39:25.413 に答える