Element disappears only in Safari 10 (9 was ok), shows when I change any css

Question

I have a bootstrap column containing a header div which is another bootstrap row, inside a React web app.

The container has the css:

height: calc(100vh - 14em);
overflow-y: hidden;
padding-left: 0;
padding-right: 0;
display: table;
border-left: thin solid #e6e6e6;

And the header row has the css:

border: thin solid #e6e6e6;
border-left: 2px solid #e0e0e0;
height: 6em;
margin-left: 0;
margin-right: 0;
display: table-caption;

This works perfectly in every browser except Safari 10.1, where it disappears when the other elements in the container column are shifted around (via React state). It was working in Safari 9, it only stopped working when I updated.

I've tried removing css properties one at a time, and adding "position: relative" as well as every overflow option, and nothing works. I also tried looking up similar issues (elements disappearing only in Safari), and none of those have worked so far either.

But what's weird is if I change ANY css property in the browser, like if I remove "height: 6em" and then put it back, the div shows. If I start adding another css property, the element shows, before I even finish typing.

I'm pretty sure this is a bug in Safari, since it wasn't a problem in 9 or in any other browser... how can I get it to force an update, or better yet not need one?

Answer 1

Here's the technique I use when I encounter this nasty bug in Safari.

I basically force a redrawing of the element with a css animation loop:

@keyframes forceRedraw {
    from { box-shadow: inset rgba(0,0,0,0) 0 0 0; }
    to { box-shadow: inset rgba(0,0,0,0.0000001) 0 0 0 10px; }
}

.container{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: forceRedraw;
    animation-duration: 4s;
    animation-iteration-count:infinite;
}

Hope this helps!

Answer 2

You can try setting -webkit-transform: translate3d(0,0,0); on the element to force GPU processing. That worked for me on a similar issue.