[BUG] - Model Signature not displayed inside of CSS-Grid in Safari when width is set to auto

[michaelworm]

Contact Details

https://porschedev.slack.com/archives/CT7AVHTTQ/p1714999793694039

JS Framework

Components-JS

Porsche Design System version

latest

On which device(s) you can see the bug?

Mac

In which browsers you can see the bug?

Safari

Browser version

17.4.1

Reproduction Example

https://stackblitz.com/edit/wqiwuq-az7c9c?file=index.html

Steps to reproduce the behavior

1. Go to Stackblitz in Safari
2. See error'

Expected behavior

The Model Signature should be visible.

It seems it has something todo with --p-model-signature-width: auto since setting a fixed with will resolve the issue

[o-hook]

This issue in Safari is caused by the internal components CSS property max-width which is set on the :host element. This somehow influences the rendering in Safari in CSS Grid context. Unfortunately, removing this CSS completely is not an option because it's needed to prevent exceeding the parent's height in some scenarios.

A user of p-model-signature component can fix this in Safari by overwriting the max-width on the :hostelement, e.g.:

<p-model-signature
      model="911"
      class="signature"
      safe-zone="false"
      style="max-width: inherit"
      ></p-model-signature>

But checking if the rendering is still correct in all Browsers and layout scenarios is mandatory.

Additional note: On older Safari Versions (e.g. 15.x and <=16.2) this bug is not present! It seems that it was introduced by 16.3 with the fix of this issue:

"Fixed transfers of min and max sizes for CSS aspect-ratio to be constrained by defined sizes."

https://developer.apple.com/documentation/safari-release-notes/safari-16_3-release-notes#Resolved-Issues