2

In writing some html, I was too lazy to decide a more specific CSS selector like this:

    #z {
        transition-duration:0s;
        transition-delay:1s;
    }

So I had chosen the * selector instead.

I was surprised with the result of this code. Try it:

* {
  transition-duration: 0s;
  transition-delay: .5s;
}

#z {
  color: red;
  background-color: white;
}

#z:hover {
  color: white;
  background-color: red;
}
<html>

<body>
  <div id="z">
    <span>mouse hover here!</span>
  </div>
</body>

</html>

In my browser, transitions take effect in two steps: background-color changes after a 1s delay, followed by the change of color after another 1s delay.

If I switch back from the * selector to a more specific selector, transitions will be simultaneous. Is it browser specific? What is the relevant rule for this result?

EDIT: 1(question rephrased) Is there any specification made by CSS that every browser should follow to implement in this way(as described above), or this is up to browser or even hardware performance? 2\ I've tried it on Chrome, and a browser on an android mobile phone (a touch for a hover). Both produce the same result.

HYC
  • 67
  • 7
  • 1
    Don't ask if it's browser specific when YOU can test it in other browsers! Seems to work fine in FF and as you describe in chromium – Zach Jensz Apr 14 '22 at 07:18
  • 1
    @ZachJensz Thanks for your comment. Perhaps a rephrase of my question is desired. I can test on another browser, but I cannot determine whether the browser is buggy, or the definition of CSS actually does specify such behaviour every browser **should** follow. P – HYC Apr 14 '22 at 07:28
  • I have looked through the [Chrome User Agent Stylesheet](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) and can't find anything buggy like you suggest. gtg but if no answer when I get back I will continue searching – Zach Jensz Apr 14 '22 at 07:32
  • 1
    I suspect the issue to be inheritance related as removing the span tags around the text solves the issue – Zach Jensz Apr 14 '22 at 08:50

1 Answers1

1

Chrome and Firefox seem to differ in how transition delay impacts inheritance.

The following CSS fixed your issue for me in chromium:

#z * {
  transition-delay: 0s;
}

It sets the transition delay back to 0 for all descendants of #z.

* {
  transition-duration: 0;
  transition-delay: 1s;
}

#z {
  color: red;
  background-color: white;
}

#z:hover {
  color: white;
  background-color: red;
}

#z * {
  transition-delay: 0s;
}
<div id="z">
  <span>mouse hover here!</span>
</div>

Explanation:

The * Universal Selector selects elements of any type, so it's applying a transition delay to both div#z and span.

Chrome seems to interpret this as you wanting a delay for #z to change to white, and then a delay for span to inherit

Hover #z -- 1s --> white text on #z -- 1s --> span inherits white

Firefox seems to interpret this as you wanting a delay for #z to change to white and be inherited

Hover #z -- 1s --> white text on #z --> span inherits white immediately

Here is a crazy example with many nested elements:

* {
  background-color: inherit;
  padding: .5rem;
  transition-duration: 0;
  transition-delay: 1s;
}

#a {
  background-color: white;
}

#a:hover {
  background-color: red;
}

/* This rule seems to stop the propagation
#c {
  transition-delay: 3s;
}
*/
<div id="a">
  a
  <div id="b">
    b
    <div id="c">
      c
      <div id="d">
        d
        <div id="e">
          e
        </div>
      </div>
    </div>
  </div>
</div>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
  • 1
    True, always the old browser Firefox is best, chrome and its variant does things for us very easily which makes problems at times,I remember [this one](https://stackoverflow.com/a/31710969/14862885) – Neptotech -vishnu Apr 14 '22 at 10:24