Ayush Chaudhary Ayush Chaudhary - 27 days ago 6
CSS Question

div content gets cut off

I am facing a random CSS behavior on Safari where at times, content in one of the divs gets cut off. It reappears if I somehow select the content using the mouse or by pressing Ctrl+A. Even modifying any of the CSS properties via the console or by resizing the window, makes the content appear. Here's the before and after comparison.

The hierarchy of elements is

threads-contaner
>
threads
>
thread
>
message


It only happens to the last
message
container in a
thread
and happens only in some of the cases. I haven't been able to notice any pattern here. Also, if I remove
border-bottom
from
thread
, this behavior disappears. I am pasting the relevant CSS rules below:

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;
}


Is this a known bug in Safari or am I missing something here?

Answer

This wasn't a CSS issue. My HTML was laid out as:

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

The contents of thread-options and threads were generated asynchronously via Meteor. Whenever threads loaded before thread-options, it pushed threads down, probably confusing Safari and causing a rendering bug. Although I am not too sure what the exact problem was, but giving a height to thread-options even when there's no content fixed the issue for me.