Terence Hill Terence Hill - 14 days ago 5
CSS Question

Safari renders wrong after details element when use rem font size

Safari 10.0.1 renders element following a details element wrong, when font size ist set to rem. The elements after the details rendered with font-size 1px.

HTML

<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>


CSS

html{
font-size: 1em;
}

ul {
font-size: 1rem;
}


If element gets rerendering (e.g. hover) element get´s repainted correct.

Is there any Workaround?

Answer

A workaround is set the detail element to display none on default and the show it via JavaScript. Not clean but works.

Comments