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

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!


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.