0

次の HTML フレックス レイアウト (メッセージの表示に使用) が Android Chrome で非常に奇妙な動作をすることがわかりました。結果は、フレックス レイアウトのオーバーレイ (Chrome のデバッグ オプション) とともに、コードの下のスクリーンショットに表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Incorrect line break</title>
</head>
<body>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row-reverse;">
        <div style="display: flex; flex-direction: row-reverse;">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum</span>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</span>
    </div>
</div>
</body>
</html>

フレックスレイアウトのバグ

このコードの一部を変更すると、問題のある改行が消えます。たとえば、私が観察した非常に奇妙なことは、3 番目の段落を 1 文字でも短くすると (末尾の t を削除すると)、問題が解決することです。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Incorrect line break</title>
</head>
<body>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row-reverse;">
        <div style="display: flex; flex-direction: row-reverse;">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum</span>
    </div>
</div>
<div style="width: 100%;">
    <div style="display: flex; flex-direction: row;">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u</span>
    </div>
</div>
</body>
</html>

最後の文字を削除してもバグはありません

この問題は Android Chrome (最新バージョン、97.0.4692.98) でのみ再現可能です。デスクトップ Chrome は HTML を正しく (改行なしで) レンダリングします。テストに使用したデバイスは、Android 12 を実行する Samsung A52s 5G です。

Android Chrome でのみ発生するため、これは Android Chrome のバグであると思われます。同意しますか、それともこの奇妙な動作を引き起こす可能性のある HTML コードの具体的な問題を見つけることができますか?

4

0 に答える 0