Flip with iFrame causes iFrame to rerender

[PP-Tom]

Hello everyone,

 

I'm using Flip with an iFrame and it's causing re-renders so the video disappears and appears again at the start of the video.

 

https://stackblitz.com/edit/web-platform-zrdszr

Click the video to see the issue

 

Does anyone know how to correct this?

[GreenSock]

Good catch, @PP-Tom. That's an edge case that'd only occur when you call Flip.getState() on an element that has position: fixed and transform: none. GSAP was trying to apply a workaround that's normally necessary for an element that's not in the document flow because the browser won't report transforms accurately unless it's in the document flow. It has to temporarily reparent the element which is what was causing that iframe to reload. I've applied a workaround in the next release of GSAP which you can preview at:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

In the meantime, you can use this function to fix it in older versions: 

// in GSAP 3.12.5 and earlier, Flip.getState() could cause an iframe to reload if the element was position: fixed and transform: none. This function applies a fix that basically just applies a translateX(0.01px) temporarily. 
function fixFlip() {
  let getState = Flip.getState;
  if (getState._fixed) return; // in case the fix was already applied
  Flip.getState = (targets, vars) => {
    let revert = [];
    gsap.utils.toArray(targets).forEach(target => {
      if (!target.offsetParent && gsap.getProperty(target, "transform") === "none") {
        revert.push(target);
        target.style.transform = "translateX(0.01px)";
      }
    });
    let state = getState(targets, vars);
    revert.forEach(t => t.style.transform = "none");
    return state;
  };
  Flip.getState._fixed = true;
}

So all you need to do is call that function once and it'll swap in a new Flip.getState() function. 

 

https://stackblitz.com/edit/web-platform-hzf9ib?file=script.js

 

Better? 

[PP-Tom]

That got it, thank you very much.