Масштаб анимации по кругу с центрированным текстом сверху, в режиме mix-blend-mode

Question

Я пытаюсь анимировать кнопку, которая должна иметь черный кружок в нижнем слое с центрированным белым текстом сверху. Черный круг должен масштабироваться от полного размера до меньшего размера, в то время как текст должен использовать режим смешивания, чтобы он оставался белым, когда часть текста все еще находится в круге, и черным, когда часть текста находится за пределами круга.

Вот GIF для визуализации желаемого эффекта: http://g.recordit.co/bg4Jf7ivZ3.gif

Я пытался создать это, используя этот код:

.menu {
  position:fixed;
  bottom:0;
  left:0;
  background-color:white;
  padding:4rem;
}

.container {
    width:50px;
    height:50px;
    position:relative;
}

.container:after {
        z-index:-1;
        position:absolute;
        border-radius:50px;
        top:0;
        left:0;
        right:0;
        bottom:0;
        content:"";
        background:black;
        animation:scale 1s linear alternate-reverse infinite;
}

    .text {
        z-index:1;
        color:white;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        mix-blend-mode: difference;
    }
    
    @keyframes scale {
    from {
        margin:0;
    }
    to {
        margin:15px;
    }
}

<div class="menu">

<div class="container">
  <div class="text">Information</div>
</div>

</div>

Причина, по которой я анимирую поле в @keyframes, заключается в том, что использование transform по какой-то причине удаляет режим смешивания. Также кажется, что должна быть оболочка (в данном случае .menu) с заданным фоновым цветом, чтобы текст мог менять цвет вне круга.

В любом случае, это работает только в Chrome. Есть ли другой способ сделать это, который будет работать в максимально возможном количестве браузеров?

И есть ли способ изменить цвет текста, находясь вне круга, без необходимости устанавливать цвет фона для оболочки? Я помещаю кнопку фиксированной на страницу и предпочел бы, чтобы был способ не иметь сплошной фоновый цвет на его контейнере, чтобы он сливался с тем, что находится на заднем плане страницы.

Answer 1

К сожалению, у вас не будет поддержки mix-blend-mode , и я до сих пор не уверен, что браузеры, заявляющие о поддержке, полностью поддерживаются, но есть варианты, если, скажем, вы захотели подделать их иллюзия.

Быстрое доказательство концепции, которое может использовать некоторые твики для центрирования. Я уверен, так как измерение и упорядочивание, вероятно, сделают его нервным в Firefox, но это всего лишь PoC;

.container {
  margin: 1rem auto;
  border: red 1px dotted;
  height: 15rem;
  width: 15rem;
}

.boundary {
  position: relative;
  border: green 1px dotted;
  height: 100%;
}

.center-it, span, .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span {
  font-weight: 600;
}

.white-txt {
  width: 8rem;
  text-align: center;
  display: block;
  color: white;
}

.circle {
  height: .5rem;
  width: .5rem;
  background-color: black;
  border-radius: 50%;
  overflow: hidden;
  white-space: no wrap;
  animation: pulse 3s ease infinite;
}

@keyframes pulse {
  50% {
    height: 8rem;
    width: 8rem;
  }
}

<div class="container">
  <div class="boundary">
    <span class="black-txt">Just a test</span>
    <div class="circle">
      <span class="white-txt">Just a test</span>  
    </div>
  </div>
</div>