使用转换时出现问题不透明更改溢出隐藏

Question

如果您看到我共享的代码示例，您可以看到覆盖在盒子外面。我将问题追溯到转换属性。

我想删除div之外的内容。溢出无法正常工作。（删除过渡有效，但如果可能，我希望保留它）

任何帮助都很感激

代码链接

代码

var timer = setInterval(function() {
  document.querySelector(".qs-timer-overlay").style.opacity = (document.querySelector(".qs-timer-overlay").style.opacity * 1) + 0.1;
  if (document.querySelector(".qs-timer-overlay").style.opacity * 1 == 1) {
    clearInterval(timer);
  }
}, 1000);

.qs-main-header .qs-timer {
  padding: 13px 10px;
  min-width: 130px;
  text-align: center;
  display: inline-block;
  background-color: #dd8b3a;
  color: #FFF;
  font-size: 20px;
  border-radius: 50px;
  text-transform: uppercase;
  float: right;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.qs-main-header .qs-timer-overlay {
  z-index: 1;
  width: 10%;
  max-width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #c7543e;
  opacity: 0.0;
  /* border-radius: 50px 50px 0px 50px; */
}
.qs-main-header .qs-timer-content {
  z-index: 2;
  position: relative;
}
.scale-transition {
  -webkit-transition: all 1s;
  transition: all 1s;
}

<div class="qs-main-header">
  <div class="qs-timer scale-transition ng-hide" ng-show="visibility.timer">
    <div class="scale-transition qs-timer-overlay"></div>
    <div class="qs-timer-content ng-binding">0 <span class="ng-binding">Sec(s)</span>
    </div>
  </div>
</div>

Answer 1

是，添加不透明度：0.99 至<代码>。qs计时器问题将得到修复。

当不透明度：1或未定义时：
在这种特殊情况下，不涉及透明度，因此gfx可以避免做昂贵的事情。

如果不透明度：0.99：
nsIFrame::HasOpacy（）决定存在不透明度，因此gfx包含有价值的东西。（喜欢不透明度与border-半径）

有关更多帮助特殊情况不透明度：0.99将其视为不透明度：1用于图形，此票证不是提供我们实际目标的意见，而是提供有关CSS内部发生的事情的想法。

Answer 2

实际上，当过渡发生时，边界半径没有得到重视。这是因为创建了用于加速渲染的合成层，可以通过查看以下文章来解释：

• HTML5岩石-Chrome中的加速渲染
• GPU加速合成Chrome。

为什么禁用转换时不会发生问题？

• 如果样式发生更改，但没有满足创建合成层所必需的任何条件（即，没有动画、过渡或三维变换等）：
  • 没有合成层，所以整个区域似乎在每次更改时都会重新绘制。由于完全重新喷漆，因此没有问题
  • 不会创建具有橙色边框（合成层）的区域

  css lang-css prettyprint-override">.outer {
    position: relative;
    height: 100px;
    width: 100px;
    margin-top: 50px;
    border: 1px solid red;
    overflow: hidden;
  }
  .border-radius {
    border-radius: 50px;
  }
  .inner {
    width: 50px;
    height: 50px;
    background-color: gray;
    opacity: 0.75;
  }
  a:focus + .outer.border-radius > .inner {
    transform: translateX(50px);
    height: 51px;
    opacity: 0.5;
  }

  <a href='#'>Test</a>
  <div class='outer border-radius'>
    <div class='inner'>I am a strange root.
    </div>
  </div>