Bug 213349 - <summary> transitions not when <details> is opened
Summary: <summary> transitions not when <details> is opened
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-06-18 13:20 PDT by Bouke
Modified: 2020-06-19 17:29 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Bouke 2020-06-18 13:20:44 PDT
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.
Comment 1 Radar WebKit Bug Importer 2020-06-19 17:29:16 PDT
<rdar://problem/64550434>