Фиксированная позиция не остается фиксированной в других браузерах

Question

У меня есть этот значок для выхода из модального режима, который остается идеально зафиксированным при прокрутке вниз по Chrome, но я заметил, что он не работает в других браузерах, таких как Firefox и Safari. Я также заметил, что в правом углу значок немного смещен, но после доли секунды он перемещается туда, где и должен быть. Есть идеи, что вызывает это? Это потому, что родительский объект, который является модальным, имеет фиксированную позицию, и вы не можете иметь фиксированную позицию внутри фиксированного контейнера? Я все еще учусь HTML.

.outer {
  position: fixed;
  top: 0;
  width: 70px;
  cursor: pointer;
  z-index: 3;
  right: 0;
  margin: 20px 20px 0px 0px;
}

.inner {
  width: inherit;
  text-align: center;
}


.inner::before, .inner::after {

    position: absolute;
    content: '';
    height: 1px;
    width: inherit;
    background: #FFC107;
    left: 0;
    transition: all .3s ease-in;

#animatedModal3 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: auto;
  z-index: 9999;
  opacity: 1;
  animation-duration: 0.6s;
}

.inner::after {

    bottom: 50%;
    transform: rotate(-45deg);

}

.inner::before {

    top: 50%;
    transform: rotate(-45deg);

}

<div id="animatedModal3" class="bg-black">

  <div class="close-animatedModal3 py-3 bg-black">
    <div class="outer">
      <div class="inner">
        <label class="label2">Back</label>
          </div>
          </div>

          </div>
          </div>

Answer 1

У вас есть скобка, которая здесь не закрыта .inner :: before, .inner :: after {...