Dashboard background gets scaled up

[Lux315]

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.

Describe the issue you are experiencing

Since 2023.5 the background image on every view gets scaled up by the length of the view. The longer the view, so is the image more zoomed in.

This actually just happens on ios so far. But in the app and safari. Samsung app is fine

Describe the behavior you expected

normal scales background

Steps to reproduce the issue

1. set background image
2. use an ios device

...

What version of Home Assistant Core has the issue?

2023.5

What was the last working version of Home Assistant Core?

2023.4.x

In which browser are you experiencing the issue with?

Safari and mobile app

Which operating system are you using to run this browser?

IOS

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[Lux315]

If i remove the "fixed" in the raw config editor, the same happens on the samsung app. Place back fixed und samsungs view is just fine. IOS keeps beeing wrong.

Seems like theres a problem with the "fixed" for ios

[piitaya]

Can you provide some screenshot with current behavior and expected behavior. Also, can you provide the options you set in the raw config editor?

[Lux315]

Code:

background: center / cover no-repeat url('/local/background.jpeg') fixed

How it should look like: (Now on Android:

And this is how it looks on all ios devices:

On Android the background is fixed but on ios its getting zoomed in.

[Lux315]

It should look like this:
https://github.com/home-assistant/frontend/assets/67388320/8cf0a971-5e25-4c7c-9336-ef1175b7c781

But it looks like this on ios:
https://github.com/home-assistant/frontend/assets/67388320/53d62587-cf0b-4c5f-a214-95e8a28bde41

[piitaya]

Seems like a iOS issue. background-attachment: fixed is not supported on iOS.
https://developer.apple.com/forums/thread/99883
https://caniuse.com/background-attachment
https://bugs.webkit.org/show_bug.cgi?id=219324

[Lux315]

I dont know, but it worked before 2023.5 just fine. Got 3 iphones here and all worked perfectly fine before 2023.5 and it changed instantly after the update on all device with ios.

So it has to be something with 2023.5. i think.

[Lux315]

And yes im sure it worked before. All 3 people who use these 3 devices mentioned it directly after the update

Iphone 11+ with ios 16.4.1
Iphone 13 with ios 16.4.1
iphone x with ios 16.4.1

And if i roll back to 2023.4, it just works

[Lux315]

@piitaya Thanks for your answer before.

Ive just seen that the apple
home app does have a fixed background aswell, so this should really work and seems to be an issue with 2023.5.

Id be very happy if we could get back the fixed background.

Thx for your work here!

[Lux315]

@piitaya

Thats still a problem. Do you mind taking a look?

[Lux315]

I had another instance running on 2023.4.4 on a VM, background works fine

updated to 2023.6, background is broken again.

So im sure the update broke this function.

[andre4715]

Hello,

i have exactly the same Problem but can't find a solution until today. Did you find a solution net ?

[Lux315]

@andre4715

no, i couldnt find any solution for that. Hoping that @piitaya answers someday.

[piitaya]

I already responded that it's a Safari issues : #16406 (comment)
Also, I'm unable to have it working in a older version (2023.2). Even on Chrome, fixed background doesn't work on this version.
Maybe it only worked in 2023.4 (and not before, not after). We did some changes to the layout but we had to revert due to scrolling issues on dashboard.

EDIT : I tested in detail :
2023.3 : doesn't work
2023.4 : works
2023.5 : doesn't work

The changes in 2023.4 is that we used nested scrolling container but we reverted to window scrolling for better scroll support.

[andre4715]

I can confirm this. Only in 2023.4 ist was working on Safari or ios, but i also had scrolling issues in Dashboard. Since 2023.5 background Is scaled in Safari but scrolling Is Smooth. Now i still use 2023.4.

@piitaya ….do you think we will get a Solution in near future? Don‘t want to stay in 2023.4 for ever.

[piitaya]

I don't have a solution because adding nested scrolling container will introduce scrolling issue.

[Lux315]

Thanks for your answers @piitaya

The fixed background worked for me since 2022.11 until 2023.4

i asked @Petro31 @ Discord and he responded that his ios background works fine (i think that was with 2023.6)

Still thanks for trying to fix this!

[andre4715]

I have to correct me. At the moment i am using 2023.4.6 and the background on Safari/iOS Is fine, and also no issues with scrolling in the Dashboard. Problem with scrolling was before 2023.4.6

@piitaya maybe something else Is different in 2023.4.6 ? This Version works Perfect for me.

[Lux315]

@andre4715 What code are you using to set the background?

Do you set in in the raw config editor or in a theme?

[andre4715]

@Lux315

i use the following code in my .yaml

title: 'home'
path: home
icon: mdi:home
background: >-
center / cover no-repeat url("/hacsfiles/themes/wallpaper/iphone/ha-iphone-home01.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.

[ncodee]

@piitaya Could you implement some sort of work around for this please?

[hsph]

I'm also fighting with this and couldn't find a solution yet.

[Lux315]

Couldnt find a solution for now.

Found out that even mp4 videos with this "https://github.com/rbogdanov/lovelace-animated-background" even get stretched

[Lux315]

This will get a big issue now with the option to set backgrounds from the UI

[andre4715]

Because it did. Not work , i now use bubble Card Pop ups. Inside bubble Card Pop up the background Is fixed and Not scaled.Von meinem iPhone gesendetAm 12.06.2024 um 11:30 schrieb Sebastian H. ***@***.***>: I'm also fighting with this and couldn't find a solution yet. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[hsph]

I found a solution today. The only minor downside is that it displays the background on every page in Home Assistant, not just the dashboard. However, I think it looks quite nice. With a bit more tinkering, you can probably figure out how to prevent this.

Anyway, here's how I fixed it for me:
Step 1: Create a css file: /hacsfiles/dashboard_resources/background-fix.css

@media (prefers-color-scheme: dark) {
  html::before {
      content: ' ';
      display: block;
      background-image: url('[/path/to/your/light-background') !important;
      background-position: center;
      background-size: cover;
      height: 100vh; width: 100vw;
      top: 0; bottom: 0; left: 0; right: 0;
      position: fixed;
      z-index: -10;
  }
}

@media (prefers-color-scheme: light) {
  html::before {
      content: ' ';
      display: block;
      background-image: url('[/path/to/your/light-background') !important;
      background-position: center;
      background-size: cover;
      height: 100vh; width: 100vw;
      top: 0; bottom: 0; left: 0; right: 0;
      position: fixed;
      z-index: -10;
  }
}

You can also remove the @media at-rule if you don't want to have separate backgrounds for light and dark.

Step 2: Add this file as a dashboard resource
In Home Assistant go to Settings > Dashboards > ... (top right corner) > Resources.

Add a new resource (bottom right corner).
URL: /hacsfiles/dashboard_resources/background-fix.css
Resource type: Stylesheet

Step 3: Clear cache and reload
As the title says, clear your caches and reload the page. The fix should be applied now.

Step 4: (Optional) disable theme background
If you have a theme which sets a background image, you have to disable that.

Source of css workaround: https://julia-vicentini.de/blog/background-attachment-fixed-ios-workaround/

[Lux315]

@hsph Thx for sharing! Ill give it a try.

@piitaya could you please take a look at this?

Maybe that could be implemented if it works permanently

[piitaya]

I installed iOS 18 to test if it will be resolved and of course, it's not resolved... 😡 I also checked a similar solution as @hsph few weeks ago but It will disable to ability to set a no-fixed background for those who wants.

We introduced UI to set a background in the last release and we will iterate to improve the background customization. This issue will be taken into account 👍

[Lux315]

@piitaya Thank you very much! Happy to hear this

If any testing is needed, im happy to help!

[GGSSDD]

Hi,
Any development on the subject?