溢出：隐藏会导致对象在移出父div时丢失其z索引

Question

有效的Codepen在这里：https://codepen.io/reaganhenke/pen/pqywqr。

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  background-color:white;
}

* , :before, :after{
  position: absolute;
}

:before, :after {
  content: "";
}

.world {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 620px;
  height: 400px;
  transform:scale(1.1);
}

.content {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, #e5efee 0%, #789693 100%);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.squid {
  position: relative;
  top: 60%;
  height: 59px;
  width: 133px;
  left: 161px;
  animation: swim 15s infinite;
}

@keyframes swim {
  0% {
    left: -189px;
  }
  17% {
    left: -119px;
  }
  33% {
    left: 131px;
  }
  50% {
    left: 201px;
  }
  66% {
    left: 451px;
  }
  83% {
    left: 521px;
  }
  100% {
    left: 771px;
  }
}

.squid .fin:nth-of-type(2) {
  bottom: calc(50% - 21px);
  background-color: #a5413b;
  height: 60px;
  width: 60px;
  right: 7px;
  border-radius: 16%;
  transform: rotate(60deg);
}

.squid .fin:nth-of-type(5) {
  top: calc(50% - 21px);
  background-color: #a5413b;
  height: 60px;
  width: 60px;
  right: 9px;
  border-radius: 16%;
  transform: rotate(30deg);
  -webkit-clip-path: polygon(57% 55%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(57% 55%, 100% 0, 100% 100%, 0% 100%);
  animation: fin-swell 5s infinite;
}

@keyframes fin-swell {
  0% {
    top: calc(50% - 21px);
  }
  50% {
    top: calc(50% - 16px);
  }
  80% {
    top: calc(50% - 21px);
  }
}

.squid-body {
  background-color: #DB5E53;
  height: 59px;
  width: 133px;
  border-radius: 30px 90px 90px 30px / 39px 45px 45px 40px;
  border-left: 3px solid #a5413b;
  -webkit-box-shadow: inset 0px -23px 35px -12px rgba(112, 48, 43, 0.7);
  -moz-box-shadow: inset 0px -23px 35px -12px rgba(112, 48, 43, 0.7);
  box-shadow: inset 0px -23px 35px -12px rgba(112, 48, 43, 0.7);
  animation: body-swell 5s infinite;
}

@keyframes body-swell {
  0% {
    height: 59px;
  }
  50% {
    height: 65px;
  }
  80% {
    height: 59px;
  }
}

.squid .eye {
  background-color: #dad7bb;
  height: 14px;
  width: 20px;
  top: 28px;
  left: 1px;
  transform: rotate(21deg);
  border-radius: 52%;
}

.squid .eye:before {
  background-color: #7a2a27;
  height: 4px;
  width: 18px;
  top: 6px;
  left: 1px;
  transform: rotate(4deg);
  border-radius: 9px 9px 9px 9px / 2px 2px 2px 2px;
  animation: blink 5s infinite;
}

@keyframes blink {
  0% {
    height: 4px;
  }
  50% {
    height: 4px;

  }
  60% {
    height: 1px;
  }
  80% {
    height: 4px;
  }
  100% {
    height: 4px;
  }
}

.tentacle span:nth-of-type(1){
  border-top: 9px solid #a5413b;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 55px;
  width: 114px;
  top: 5px;
  right: calc(100% - 34px);
  animation: tentacle-1 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-1 {
  0% {
    transform: skewY(0deg);
    width: 114px;
    height: 55px;
  }
  50% {
    transform: skewY(5deg);
    width: 100px;
    height: 40px;
  }
  80% {
    transform: skewY(0deg);
    width: 114px;
    height: 55px;
  }
}

.tentacle span:nth-of-type(2){
  border-bottom: 9px solid #a5413b;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 32px;
  width: 83px;
  top: 3px;
  right: calc(100% - 20px);
  animation: tentacle-2 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-2 {
  0% {
    transform: skewY(0deg);
    width: 83px;
    height: 32px;
  }
  50% {
    transform: skewY(-5deg);
    width: 65px;
    height: 25px;
  }
  80% {
    transform: skewY(0deg);
    width: 83px;
    height: 32px;
  }
}

.tentacle span:nth-of-type(3) {
  border-top: 9px solid #DB5E53;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 39px;
  width: 98px;
  top: -5px;
  right: calc(100% - 26px);
  animation: top-tentacle 5s infinite;
  transform-origin: right;
}

@keyframes top-tentacle {
  0% {
    transform: skewY(0deg);
    width: 98px;
  }
  50% {
    transform: skewY(12deg);
    width: 75px;
  }
  80% {
    transform: skewY(0deg);
    width: 98px;
  }
}

.tentacle span:nth-of-type(3):after {
  border-bottom: 9px solid #DB5E53;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 25px;
  top: -22px;
  width: 82px;
  right: calc(100% - 20px);
  animation: tentacle-3 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-3 {
  0% {
    width: 82px;
    top: -22px;
  }
  50% {
    width: 65px;
    top: -24px;
  }
  80% {
    width: 82px;
    top: -22px;

  }
}

.tentacle span:nth-of-type(4){
  border-bottom: 9px solid #DB5E53;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 26px;
  width: 98px;
  top: 28px;
  right: calc(100% - 28px);
  animation: bottom-tentacle 5s infinite;
  transform-origin: right;
}

@keyframes bottom-tentacle {
  0% {
    transform: skewY(0deg);
    width: 98px;
  }
  50% {
    transform: skewY(-12deg);
    width: 75px;
  }
  80% {
    transform: skewY(0deg);
    width: 98px;
  }
}

.tentacle span:nth-of-type(4):after {
  border-top: 9px solid #DB5E53;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 25px;
  top: 15px;
  width: 82px;
  right: calc(100% - 17px);
  animation: tentacle-4 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-4 {
  0% {
    width: 82px;
    top: 15px;
  }
  50% {
    width: 65px;
    top: 17px;
  }
  80% {
    width: 82px;
    top: 15px;
  }
}

.tentacle span:nth-of-type(5){
  border-bottom: 9px solid #DB5E53;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 26px;
  width: 97px;
  top: 13px;
  right: calc(100% - 20px);
  animation: tentacle-5 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-5 {
  0% {
    width: 97px;
  }
  50% {
    width: 75px;
  }
  80% {
    width: 97px;
  }
}

.tentacle span:nth-of-type(6){
  border-top: 9px solid #DB5E53;
  border-right: 9px solid transparent;
  border-radius: 50%;
  height: 26px;
  width: 60px;
  top: 14px;
  right: calc(100% - 20px);
  animation: tentacle-6 5s infinite;
  transform-origin: right;
}

@keyframes tentacle-6 {
  0% {
    width: 60px;
  }
  50% {
    width: 50px;
  }
  80% {
    width: 60px;
  }
}

.cover-1 {
  background-color: white;
  width: 800px;
  right: 100%;
  height: 100%;
}

.cover-2 {
  background-color: white;
  left: 100%;
  width: 800px;
  height: 100%;
}

<div class="world">
  <div class="content">
    <div class="squid">
      <div class="tentacle">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="fin"></div>
      <div class="squid-body"></div>
      <div class="eye"></div>
      <div class="fin"></div>
    </div>
  </div>
</div>

在台式机上完全可以正常运行，但在移动设备上则不能。在移动设备上，当鱿鱼开始退出其父div（已溢出：隐藏）时，鱿鱼的每个元素在退出时均落在z-index的后面。我认为这与父div隐藏了溢出有关，但我找不到任何有关它的信息，或者为什么这只会在移动设备上发生。