Search code examples
csssafariclip-path

Safari not redrawing elements hidden by clip-path

I came across a strange safari bug that made some elements invisible until they where hovered over.

This was caused by the element previously being hidden with clip (clip-path). Safari only redrew them after a hover effect changed their design and thus forcing safari to redraw the object.

.logo-container {
  position: absolute;
  top: 0px;
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0, auto, auto, 0);
}
Solution

  • To solve this i used a repeating css animation to force safari to redraw the elements a few times each second.

    @-webkit-keyframes mymove {
from {top: 0px;}
to {top: 0.01px;}
}

.logo-container {
  position: absolute;
  top: 0px;
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0, auto, auto, 0);
  -webkit-animation: mymove 0.1s infinite; /* Safari 4.0 - 8.0 */
}

    Now the element is redrawn and visibility works as intended.

    Please answer this question if there are any better solutions to this problem :)