CODEWITHSUNDEEP
cssclip-path
Picard102
Picard102

Reputation: 644

Clip-Path and child animation in Chrome

So I have a menu that is revealed using a clip path, and then inside that the links animate from 0 - 1 opacity. This worked for a while, until chrome 66. This still works in Firefox, so I'm not sure if this is a bug in chrome or the way it's supposed to be and Firefox hasn't caught up. 

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #f1f200;
  padding: 24px;
  display: none;
  transition: 500ms ease-out;
}

.mobile-menu {
  clip-path: circle(0 at 0% 0%);
  display: block;
}

.mobile-menu.active {
  display: block;
  clip-path: circle(200% at 0% 0%);
}

.mobile-menu.active a {
  animation-name: slideInDown;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  animation-delay: 160ms;
}

.mobile-menu a {
  color: #ff005d;
  animation-name: none;
  display: block;
  opacity: 0;
}

https://codepen.io/picard102/pen/zjoexP

So how would I go at replicating the effect in chrome now?

Upvotes: 2

Views: 642

Answers (1)

crbug
crbug

Reputation: 26

This is bug https://bugs.chromium.org/p/chromium/issues/detail?id=823362

It works fine in Chrome 67 and 68.

Upvotes: 1

Related Questions