divコンテンツが切断される

Question

私はSafariでランダムにCSSの動作に直面していますが、divの1つのコンテンツが途切れることがあります。私は何とかマウスを使って、またはCtrl + Aを押してコンテンツを選択すると再び現れます。コンソールからCSSプロパティを変更したり、ウィンドウのサイズを変更したりしても、コンテンツが表示されます。比較はbeforeとafterです。

要素の階層は、それだけthreadの最後message容器に起こり、ケースのみの一部で起こるthreads-container>threads>thread>message

あります。私はここでどんなパターンにも気づくことができませんでした。また、threadからborder-bottomを削除すると、この現象は消えます。関連するCSSルールを貼り付けています：

div.main-container div.threads-container { 
    float: left; 
    display: block; 
    margin-right: 0%; 
    width: 39.58333%; 
    background-color: #F6F7F9; 
    height: 100%; 
    position: relative; 
    word-wrap: break-word; 
} 
div.main-container::after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
div.main-container div.threads-container:last-child { 
    margin-right: 0; 
} 

div.main-container div.threads-container div.threads { 
    background-color: #fff; 
    height: calc(100% - 295px); 
    position: relative; 
    overflow-y: scroll; 
    word-wrap: break-word; 
    padding: 0px 10px 10px 0px; 
} 

div.main-container div.threads-container div.threads div.thread { 
    border-bottom: 1px Solid #e4e4e4; 
    padding-bottom: 10px; 
    display: block; 
} 

div.main-container div.threads-container div.threads div.thread div.message { 
    color: #444444; 
    border-left: 3px solid transparent; 
    padding: 10px 0px 0px 10px; 
} 

これはSafariの既知のバグですか？ここに何か不足していますか？

Answer 1

これはCSSの問題ではありませんでした。

<div class="threads"> 
    <div class="thread-options"> 
    ... 
    </div> 
    <div class="threads"> 
     <div class="thread"> 
     ... 
     </div> 
     <div class="thread"> 
     ... 
     </div> 
    </div> 
</div> 

thread-optionsとthreadsの内容は流星を経由して非同期に生成された：私のHTMLは次のようにレイアウトされました。 threadsがthread-optionsの前にロードされると、threadsが押され、恐らくSafariが混乱し、レンダリングのバグが発生する可能性があります。正確な問題は何だったのか分かりませんが、内容がなくてもthread-optionsに身長を教えてください。

Answer 2

実際の解決策を見つけるには十分な情報がありません。私は批判的なことを意味するわけではありませんが、よくフォーマットされたコードを1〜2回間違えて始めてから、問題を解決しようとしているようです。私もこれをやろうとする傾向があります。そして、私は通常、同じ問題と無意味なコードの束に終わります。

いくつかのHTMLがないとこれに答えるのは難しいでしょうが、SassのようなCSSプリプロセッサを使用すると、CSSのやり取りの視覚化が容易になります。このようなコードを適切に記述するのはずっと簡単です。

PS-これに答えても、Sassのようなツールをチェックアウトする必要があります。なぜなら、CSSをもっと便利にするからです。

更新：ちょっとあなたのコードをちょっと見てみました。 'div.class-name'と書かれた各セレクタがあり、実際にそこに 'div'は必要ありません。私はこれが何かに影響することを真剣に疑っていますが、あなたがそれを必要としないなら、それを使わないでください。また、各セレクタの間にカンマを挿入する必要があります。それはおそらく何もしていないが、あなたはそれを試すことができます。