Admonition boxes look different on Safari and Firefox since last update

[ghost]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

Since the last update to mkdocs-material 8.0.2+insiders.4.1.0, the admonitions-style is rendered strangely on Safari. On Firefox, it looks as usual:

Screenshot from https://squidfunk.github.io/mkdocs-material/reference/admonitions/#admonition-icons on Firefox

and on Safari:

This happens also to my generated pages and started with the last update to 8.0.2+insiders.4.1.0. Last well working version from my side was 7.3.6+insiders.3.2.3

Expected behaviour

Admonition boxes should look the same on Safari and Firefox

Actual behaviour

Admonition Boxes look different and ugly on Safari

Steps to reproduce

Build a site with admonition boxes and visit it withj safari and Firefox

Package versions

• Python: Python 3.10.0
• MkDocs: version 1.2.3
• Material: 8.0.2+insiders.4.1.0

Configuration

For example parameters from mkdocs material documentation page

System information

• Operating system: Mac OS 12 on Apple M1
• Browser: Safari 15.1 and Firefox 94.0.2

[squidfunk]

Fixed in 0b22e78. Quite interesting. I'm pretty sure this is a (yet unknown?) bug in Safari which doesn't accept :is(...) on summary elements. In general, summary elements are very buggy in Safari.

[squidfunk]

Released as part of 8.0.3