Paver

Thanks Jack, much appreciated and a much better work around in the meantime! For anyone else needing the workaround, the following handler should retain the default resize functionality with the additional check for Safari: window.addEventListener('resize', function () { if (!document.webkitFullscreenElement) { ScrollTrigger.refresh(true); } });

Hi @GreenSock, I know this is an old thread but is it possible to also skip the resize refresh if document.webkitFullscreenElement is defined? Safari still doesn't support the non-prefixed version: https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement#browser_compatibility. I'm having the fullscreen video (inside a pinned section) closing again straight after going into fullscreen mode on Safari. The workaround from @ZachSaucier doesn't really work for me as I can't add my own fullscreen button and have various embedded players with their own controls that could be used in the section. I've tried listening to the 'webkitfullscreenchange' event to potentially unbind the resize event from there but it's firing too late (after the resize event). The only ugly looking solution I have currently is to bind my own resize event before requiring GSAP and manually updating document.fullscreenElement based on document.webkitFullscreenElement: window.addEventListener('resize', () => { if (document.webkitFullscreenElement && !document.fullscreenElement) { document.fullscreenElement = document.webkitFullscreenElement; } if (!document.webkitFullscreenElement && document.fullscreenElement) { document.fullscreenElement = null; } });

Glad it's not just me Haven't noticed this before but thanks for the workarounds. A little hacky but think I prefer adding the slight rotation as it can just be included in the same GSAP call. I do wonder how it fixes it though ? @OSUblake pixel snapping... that's the term I was looking for!

Is anyone else experiencing jerky animations with GSAP on latest Chrome (v89)? It's very noticeable on text - looks like it's moving one pixel a time for me (some kind of subpixel rendering issue perhaps?). I have a comparison to a CSS animation in the CodePen which is looking smooth in Chrome. I don't experience the issue in Safari (can't tell the difference between GSAP/CSS in the CodePen).

Sorry I missed that. Looks good ? Do you know if there's much performance overhead in setting the element style in onUpdate or is it essentially what's happening under the hood?

GSAP is animating the properties [offset-x | offset-y | blur-radius | spread-radius] in webkit browsers when using certain rgba values for boxShadow. Putting the color value first like 'rgba(255,0,0,1) 0px 0px 70px 35px' fixes the issue in webkit but breaks in Edge which actually works correctly for the CodePen example. The only cross browser solution I have at the moment is to animate the color property in a separate object and then set it in onUpdate.