Background Flickers in Safari

[anthonylavado]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

When moving the mouse on any view with a background (a card or a whole screen), the background will flicker in and out. This issue is also described (with screenshots) in this community thread: https://community.home-assistant.io/t/view-with-background-image-constantly-flickers-on-mouse-movement/237400

Expected behavior

The background should stay constant and not flicker. This correct behaviour is seen in Chrome and Firefox (versions listed at the end).

Steps to reproduce

Add a background to a card, or to a full page (using a theme in most cases).

Environment

• Home Assistant release with the issue: All 2021.1.x releases (at least), including 2020.1.4
• Last working Home Assistant release (if known): Unknown at this point
• Browser and browser version: Safari macOS Version 14.0.2 (16610.3.7.1.9), and Mobile Safari in iOS 14.3 release (build 18C66)
• Operating system: macOS Big Sur 11.1 (20C69), iOS 14.3 release (build 18C66)

State of relevant entities

N/A

Problem-relevant frontend configuration

The example from the community thread:

title: Home solar energy
path: home_solar_energy
icon: mdi:solar-power
background: center / cover no-repeat url('/local/images/solar_grid.png') fixed

Javascript errors shown in your browser console/inspector

None

Additional information

The bug does not appear in macOS Chrome Version 87.0.4280.141, macOS Firefox 84.0.2, or official iOS Companion App 2022.1.1.

[anthonylavado]

I have tested mobile Safari in iOS 14.3 release (build 18C66) and can reproduce the issue.

Interestingly, this issue does not appear in the release iOS Companion app, currently at version 2021.1.1.

I have amended the issue above.

[marcoach]

Hi anthonylavado
Hoping to be helpfull !

Looking for “something” in SAFARI i noticed that the flicker appears on click and moving the mouse from and to the upper menu and the background. With the inspector of safari, under network folder i saw that every time it flicks it reloads the background.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[marcoach]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

Currently , also with new Home assistant version , the issue still remain.

[davidorlea]

This is still an issue in Home Assistant release 2021.4.6 for me.

[bramkragten]

Does this also happen when you use the css variable lovelace-background in a theme?

[davidorlea]

Yes, e.g. with

lovelace-background: center / cover no-repeat url("/local/backgrounds/image.jpg") fixed

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[davidorlea]

The issue still persists in Home Assistant 2021.7.4 and Safari 14.1.2 (16611.3.10.1.3).

[marcoach]

Hi, The issue still persists in Home Assistant 2021.7.4 and Safari . thanks.

…

Il giorno 27 lug 2021, alle ore 16:06, github-actions[bot] ***@***.***> ha scritto: There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#8177 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF57SPG6ZXE675KUVLSMDBTTZ24ORANCNFSM4WFYZM6Q>.

[davidorlea]

Issue seems to be fixed in Safari 15.0 (16612.1.29.41.4).

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.