siema icon indicating copy to clipboard operation
siema copied to clipboard

iFrame slide content reloads on resize

Open MartinP-C opened this issue 6 years ago • 5 comments

Example here: https://codepen.io/Bobsworth/pen/EexJxP

When the page is resized, the iFrame "reloads". This is undesirable as it will reset the iframe and flash. In my production usage where I discovered this I have a Siema carousel in the iframe, which itself is slide 2 of a Siema carousel! So if the page is resized the inner carousel will reset to slide 1 when the iframe reloads.

This is from the resizehandler calling buildSliderFrame which recreates the inner elements, creating a new iframe element which loads again, appearing to be refreshing. I fixed this by not recreating the docFragment on resize (in a new reBuildSliderFrame method).

I can create a pull request later.

MartinP-C avatar Aug 21 '18 09:08 MartinP-C

Hi.

No, PR is not needed. I will address this issue in a next version. Thanks for reporting an issue.

Have a great day 👋

pawelgrzybek avatar Aug 21 '18 10:08 pawelgrzybek

Hi.

I think I have the same issue. When embedding YouTube videos, clicking on the full-screen icon triggers a reload of the iframe, which (of course) closes the full-screen of the previous iframe immediately. I guess that's because a window resize event is fired, but I'm not 100% sure.

Anything I can do to fix this as soon as possible?

raphiz avatar Aug 28 '18 14:08 raphiz

Hi @pawelgrzybek, Do you have some estimates for the current task - when will it be fixed?

We don't want to switch to another plugin, but the current fix is necessarily required in nearest time for avoiding our transition.

Thanks in advance!

dmytrodemchenko avatar Jan 18 '19 07:01 dmytrodemchenko

Does anyone know a workaround for this issue?

nielsodgaard avatar Aug 17 '20 13:08 nielsodgaard

I did something like this to work around the issue:

let wasFullscreen = false;
window.removeEventListener('resize', carousel.resizeHandler);
window.addEventListener('resize', function() {
  const isFullscreen = window.screenTop === 0 && window.screenY === 0;
  if (isFullscreen) {
    wasFullscreen = true;
  } else if (wasFullscreen) {
    wasFullscreen = false;
  } else {
    carousel.resizeHandler();
  }
});

Sure there's improvements to be made but seems to do the trick as far as I can see.

qubaji avatar Dec 30 '20 13:12 qubaji