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.
224 stars 19 forks source link

Browser: compatibility with Safari 16.2-16.4 #184

Closed AmoebeLabs closed 1 year ago

AmoebeLabs commented 1 year ago

The Problem To Be Solved

Apple has made essential changes somewhere in Safari 16.2-16.4: they fixed some long-standing bugs (years old) that required separate rendering paths.

Now with this fix, it seems that for most rendering paths, the same rendering path as used for Chrome and Firefox can be used.

Additional background:

There are some major changes underway such as a new SVG rendering engine for WebKit which should fix most of the problems this card has with Safari and Mobile Safari.

See: https://wpewebkit.org/blog/05-new-svg-engine.html

Related Issues (if any)

(Optional): Suggested Solution

Make new checks for Safari16 for both the Desktop browser and the mobile companion app. The latter one does use a custom user agent string, see: https://github.com/home-assistant/iOS/blob/master/Sources/Shared/API/HAAPI.swift

    public static var userAgent: String {
        // This matches Alamofire's generated string, for consistency with the past
        let bundle = Constants.BundleID
        let appVersion = Constants.version
        let appBuild = Constants.build

        let osNameVersion: String = {
            let version = ProcessInfo.processInfo.operatingSystemVersion
            let versionString = "\(version.majorVersion).\(version.minorVersion).\(version.patchVersion)"

            let notCircularReferenceWrapper = DeviceWrapper()
            let osName = notCircularReferenceWrapper.systemName()
            return "\(osName) \(versionString)"
        }()

        return "Home Assistant/\(appVersion) (\(bundle); build:\(appBuild); \(osNameVersion))"
    }

Desktop: this.isSafari16 = this.isSafari && /Version\/16\.[0-9]/.test(navigator.userAgent);

Companion App: this.isSafari16 = this.isSafari16 || /os 16.*like safari/.test(navigator.userAgent.toLowerCase());

(Optional): Alternative Solutions