<summary> transitions not when <details> is opened

[Bouke]

Say I have implemented a custom disclosure triangle for my <summary> element:

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: ">";
  display: inline-block;
  transition: transform 0.5s ease;
  width: 1em;
  vertical-align: baseline;
  text-align: center;
}

details[open] summary::before {
  transform: rotate(90deg);
}

And it is used like this:

<details>
  <summary>System Information</summary>
  <p>
    macOS Catalina
  </p>
</details>

Expected behaviour:
As soon as I click the <summary> element, the transition from > to ⌄ should start, and vice versa.

Actual behaviour:
The transition doesn't start when the <summary> element is clicked. The exact conditions that are triggering the transition are somewhat unclear to me. It seems to start only after giving another element focus or moving the cursor outside of the parent element.

[Radar WebKit Bug Importer]

<rdar://problem/64550434>