search

AmoebeLabs / swiss-army-knife-card

The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.
239 stars 21 forks source link

Scaling / Positioning issue with iOS / Safari 15.2.1 #71

Closed AmoebeLabs closed 2 years ago

AmoebeLabs commented 2 years ago

The Problem To Be Solved

Since iOS / Safari 15.2.1, view7 doesn't work anymore the way it should. It seems to be the only view that is affected by the new version.

It happens also to be the only view that scales/positions SAK templates, so I guess that Safari has changed (again) the handling of this. This was already a lot of work to get working on Safari.

Might be the case that Safari is now the same as Chrome. But in that case it should still work on 15.2, so how to do that?

iPhone is on 15.2.1 iPad on 15.2 --> Don't upgrade!!!!!!!!!!!!!

Screenshot from iPhone image

Screenshot from PC/Chrome with Safari user-agent

User-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15

image

From these 2 screenshots it seems that Apple fixed some stuff to be inline with Chrome / Web standards.

(Optional): Suggested Solution

Given the current screenshots it seems that in this case:

So I should be able to check for that specific version of Safari in the user-agent string...

https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

AmoebeLabs commented 2 years ago

A simple addition of transform-box:fill-box; to the styling of the toolset__group-outer class in the toolset::render() function was enough to fix the scale/rotate issues. This style was already part of the Chromium renderpath.

Works for both 15.2 and 15.2.1 😄