search

MelleD / lovelace-expander-card

Expander card for HomeAssistant
Apache License 2.0
66 stars 7 forks source link

Expander card not rendering iframe properly #351

Open Caligo82 opened 3 days ago

Caligo82 commented 3 days ago

Since version 2.3.0 I have problems with an iframe embedded within an expander card. It sets the zoom level to maximum, makes the roundshot non scrollable and puts every icon on the top left corner.

standard iframe (working)

type: iframe
url: https://matterhorngotthardbahn.roundshot.com/oberwald/#/
aspect_ratio: "1"

looks like this: image

embedded iframe (not working)

type: custom:expander-card
cards:
  - type: iframe
    url: https://matterhorngotthardbahn.roundshot.com/oberwald/#/
    aspect_ratio: "1"

looks like this: image

MelleD commented 3 days ago

Sorry but I don’t see a unexpected behavior. What do you expect and how did it look with the other version?

Caligo82 commented 3 days ago

As you can see in the first picture compared to the one where it is embedded the roundshot is zoomed in. It is not possible to zoom out either with a mousewheel or scroll through the picture. Same with touch interactions.

These little icons (the red camera for example in the first picture) serve as interaction points. These icons are all rendered in the upper left corner over each other when embedded within expander card.

All these interactions work when not embedded within expander card and also in all versions before 2.3.0 I did a MRE so you could copy/paster and check yourself. The roundshot is public and not geoblocked.

Edit: Maybe this video illustrates the problem better

https://github.com/user-attachments/assets/57e0615c-b78a-408b-8591-db512eddac3e

MelleD commented 3 days ago

I see not directly a reason why it should work with the version before. With the listener there is no difference and did not change.

Caligo82 commented 3 days ago

I'm sorry, this I do not know either. However I can confirm it is working with 2.2.6 - I can record it as well if you want... I suspect this fix resulted in the new behaviour...

https://github.com/MelleD/lovelace-expander-card/issues/335

MelleD commented 3 days ago

How I said I see no reason why. Maybe you can double check with version 2.1.0

PS: I quickly double checked with the iPhone app and my iframe is working scrolling + zooming

MelleD commented 3 days ago

Sorry but your site is not working with or without expander. I tried your MRE and both are not working.

Maybe try another iframe like

type: iframe
url: >-
  https://embed.windy.com/embed2.html?lat=xxx&lon=xxx&detailLat=xxx&detailLon=xxx&width=650&height=450&zoom=11&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=true&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1"
  frameborder="0"
aspect_ratio: 100%

Works without issues

Caligo82 commented 3 days ago

Sorry but your site is not working with or without expander. I tried your MRE and both are not working.

That seems a bit odd. I mean I have it working in the video I uploaded... I also redownloaded 2.1.0, zoom and scroll is working there.

Maybe try another iframe like

It does look pretty similar to my code... I tried it but it didn't change the behaviour in my case unfortunatly.

MelleD commented 3 days ago

I also redownloaded 2.1.0, zoom and scroll is working there.

That’s good because same listener and init card.

For me it’s working on chrome browser and iPhone app. Also refresh the cache etc. works so far. Mhm so sorry I have currently no idea

Caligo82 commented 2 days ago

For me it’s working on chrome browser and iPhone app.

But not with the frame url I posted...?

Also refresh the cache etc. works so far.

I noticed that when I try to edit the frame and it refreshes its content it behaves just like before. But only until I reload it. It's really odd indeed.

Caligo82 commented 2 days ago

Basically every roundshot that is using https://www.roundshot.com/ is not working with your expander card. Could you maybe give me your config where it is working with these roundshots please?

I verified it with Android, Windows (Edge as well as Chrome, could try Firefox), different devices as well. Also tested it on different homassistant instances and different roundshots. Always the same behaviour. After 2.3.0 it stops "listening".

MelleD commented 1 day ago

I never said that it works with roundshot. I just saying with my iframe see above e.g. windy etc. it's working.

So sorry currently I have no time to test it. a) you can go to an old version b) try to revert some change from history build it locally and upload and test it

Caligo82 commented 1 day ago

I think its a rendering issue with these roundshots.... not a listening issue. I suspect the roundshot rendering issue might be related to the changes introduced in fix #335. Specifically, it seems like the open and touchPreventClick variables were made reactive in the update, and this could be affecting the rendering behavior rather than the input listener logic.

Could it be that the shift to reactive state handling is causing this issue? I wanted to bring this to your attention as a possible root cause.

Let me know if you’d like more details or testing feedback!

MelleD commented 1 day ago

How I said: Test it

I cannot say why this change should prevent zooming etc. this is just to prevent a click (expand/close) when you scroll.

Caligo82 commented 20 hours ago

I created a fork where I reverted the changes from your https://github.com/MelleD/lovelace-expander-card/pull/346 from your release 2.3.1. It seems to work. https://github.com/Caligo82/lovelace-expander-card/releases/tag/2.3.3

Is there maybe another way to fix this lag animation issue without impacting overall functionality?