Paver
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Paver
-
-
On 12/9/2020 at 10:08 PM, GreenSock said:
I added some code to the next release that'll skip the resize refresh if
document.fullscreenElement
is defined which should resolve this. You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.jsHi @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 ondocument.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).
See the Pen ZELxYXj by pavlo-livearea (@pavlo-livearea) on CodePen
- 1
-
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.
See the Pen YzPWrJB by pavlo-livearea (@pavlo-livearea) on CodePen
Full screen video issue
in GSAP
Posted
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: