Expander card not rendering iframe properly

[Caligo82]

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:

embedded iframe (not working)

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

looks like this:

[MelleD]

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

[Caligo82]

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

recordbug.mp4

[MelleD]

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]

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...

#335

[MelleD]

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]

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]

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]

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]

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]

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]

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]

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]

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]

I created a fork where I reverted the changes from your #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?