CSS transition tranform does not work in Safari

Question

I want to customise HTML summary's marker, and animate it when the details element opens. The transition animation works on all browsers except Safari both on desktop and mobile.

details {
  width: 50%;
  margin: 0 auto;
  background: #FDF4E3;;
  margin-bottom: .5rem;
  border-radius: 5px;
  color: black;
  outline: 0;
}

summary {
  padding: 1rem;
  display: block;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}

summary:before {
  content: '';
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: 1s transform ease;
}

details[open] summary {
   background: #F9D478;
}

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

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

details p {
  padding: 1rem;
}

<details>
  <summary>Summary</summary>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque porro odit nulla quis voluptas quod similique sunt, nostrum, ea maxime repellendus quisquam harum tempore illum sed, dolore qui aperiam impedit!
  </p>
</details>

I have used the following transition that did not work.

1. -webkit-transition: 1s transform ease;

2. -webkit-transition: 1s all ease;

3. details[open]>summary:before { transform: rotate(90deg); transition: 1s transform ease; }

How to fix issue?

---

These answers did not help.

css transitions not working in safari

CSS transform and transition not working in Safari

CSS transition is not working in Safari

Transitions not working on iOS safari - tried all the different suffix

Answer 1

This seems to be a known bug: Bug 213349 - transitions not when is opened:

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.

While the descriptions does not exactly match the behaviour you encounter, it is likely that those are closely related.

You could solve it with JavaScript, but that is annoying as toggle, does not bubble:

var details = document.querySelector("details")

details.addEventListener("toggle", function(evt) {
 details.classList.toggle('open', evt.target.open)
})

details {
  width: 50%;
  margin: 0 auto;
  background: #282828;
  margin-bottom: .5rem;
  box-shadow: 0 .1rem 1rem -.5rem rgba(0, 0, 0, .4);
  border-radius: 5px;
  color: white;
}

summary {
  padding: 1rem;
  display: block;
  background: #333;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}

summary:before {
  content: '';
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: 1s transform ease;
}



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

details.open>summary:before {
  transform: rotate(90deg);
}



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

details p {
  padding: 1rem;
}

<details>
  <summary>Summary</summary>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque porro odit nulla quis voluptas quod similique sunt, nostrum, ea maxime repellendus quisquam harum tempore illum sed, dolore qui aperiam impedit!
  </p>
</details>

I wouldn't use the JS solution. I actually just would wait until the bug is fixed, as it is just an eye-candy animation for the open/close marker.

Answer 2

Animations and Transitions is not supported on pseudo elements for Safari browser. MDN

You could use a real HTML element for icon then animate that element.

Here is an example with using svg element:

details {
  width: 50%;
  margin: 0 auto;
  background: #282828;
  margin-bottom: 0.5rem;
  box-shadow: 0 0.1rem 1rem -0.5rem rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  color: white;
}

summary {
  padding: 1rem;
  display: block;
  background: #333;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
}

svg {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: bottom;
  transition: all 0.3s;
}

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

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

details p {
  padding: 1rem;
}

<details>
  <summary>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
    </svg> 
    Summary
  </summary>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque porro odit nulla quis voluptas quod similique sunt, nostrum, ea maxime repellendus quisquam harum tempore illum sed, dolore qui aperiam impedit!
  </p>
</details>