Question

有div个元素和子p个元素反复从隐藏状态变为显示状态。 display和opacity属性均用于此目的。 opacity属性的转换时间为1秒。

周期如下：

将display: none更改为display: initial
对document reflow等待50毫秒（should happen本身）
将opacity: 0更改为opacity: 1
等待2秒
将opacity: 1更改为opacity: 0
等待1秒钟以完成转换
将display: initial更改为display: none
等待1秒
重复

这在FireFox中可以很好地工作，但在Google Chrome浏览器中，仅在某些情况下有效，如代码片段所示。

在简单的情况下，它不起作用。
如果子项p设置为inline-block，它将起作用。
如果inline-block元素是孙子元素而不是子元素，则不起作用。
如果孩子的位置设置为fixed，那么它会起作用。

奇怪的是，第5步中的转换也失败了，这与display属性无关，因此，这似乎不是由于回流失败引起的。

var flag = true;
var elements;

window.onload = init;

function init() {
    elements = document.getElementsByClassName("foo");
    cycleQuotes();
    setInterval(cycleQuotes, 2000);
}

function cycleQuotes() {
    if(flag) {
        for(var i = 0; i < elements.length; i++) {
            elements[i].style.display = "initial";
        }
        setTimeout(function() {
            for(var i = 0; i < elements.length; i++) {
                elements[i].style.opacity = 1;
            }
        },50);
    } else {
        for(var i = 0; i < elements.length; i++) {
            elements[i].style.opacity = 0;
        }
        setTimeout(function() {
            for(var i = 0; i < elements.length; i++) {
                elements[i].style.display = "none";
            }
        },1000);
    }
    flag = !flag;
}

.foo {
    display: none;
    opacity: 0;
    transition: opacity 1s;
}

.inline-block {
    display: inline-block;
}

#fixed {
    position: fixed;
    left: 100px;
    top: 0px;
}

<div class="foo">
  <p>normal</p>
</div>

<div class="foo">
  <p class="inline-block">inline-block</p>
</div>

<div class="foo">
  <div>
    <p class="inline-block">inline-block but grandchild</p>
  </div>
</div>

<div class="foo">
  <p id="fixed">fixed</p>
</div>

Answer 1

我能够在动画之外找出问题。出于某种原因，我不了解，Chrome浏览器不会向具有display: initial的元素的子代传播不透明度。

div {
  background: red;
  display: initial;
  opacity: 0;
}

<div>
  text inside div
  <p>text inside paragraph</p>
</div>

在Firefox上看不到任何东西，在Chrome上看不到text inside paragraph，其他什么都没有。很奇怪。

Answer 2

@jacquegoupil发现这是由display: initial和opacity属性的组合引起的。

进一步的研究使我进入this answer，其中指出initial并不表示“默认” ，这意味着它没有将属性的值设置为是元素的默认值。将属性设置为在the spec中定义为“ initial” 的值的操作。对于display属性，initial表示inline。

According to MDN，内联元素不能包含块元素，并且由于p元素默认具有display: block。

为什么Google Chrome浏览器会忽略初始显示的元素子元素的不透明度？

2 个答案: