Cross-origin isolation

[MichaelGaddis]

I have a complex tween using onUpdate and precise timing that is working on Safari but not FireFox or Chrome. The two browsers are throwing a warning about Cross-origin isolation which may or may not be the problem but since the tween in question uses (one presumes) high resolution timers it makes sense to ask. (the Google note on the error https://greensock.com/forums/forum/11-gsap/?do=add mentions that it just was implemented this month (May 2021) in Chrome so that appears to be a good clue as to why it's suddenly not working. 

 

Here is the warning from Chrome:

"SharedArrayBuffers (SABs) can be used to construct high-resolution timers. High-resolution timers simplify Spectre attacks on cross-origin resources."

 

I am using both React.js and GSAP3 as "cross origin" libraries if I understand their definition of the term .

 

My question is this. Since this is a new Chrome thing, is there a known cross browser compatibility issue here? If not--never mind..

 

btw, here is a code snippet (the tabs did not trans-copy well sorry) , btw creating a Codepen would be very time consuming...

 

const pathStartOffset = 0.0;

const pathEndOffset = 1.0;

const sparkleBaseScaleFactor = 3.5;

const sparkleExtraScaleFactor = 3.7;

const flickerFrequency = 7;

const sparkleTravelTime = 5.0;

const letterOpacityStart = 0.18;

const letterOpacityInc = 0.06;

 

...

.to(devOpsPathSparkle, { duration: sparkleTravelTime,

                                                motionPath: { path: devOpsSparklePath,

                                                align: devOpsSparklePath,

                                                alignOrigin: [0.5, 0.5], autorotate: false, ease:'none', pathStartOffset, pathEndOffset},

                                                onUpdateParams: [this.incrementingingNumber],

                                                onUpdate: function(incrementingingNumber)

                                                {

                                                  var currentPosition = pathStartOffset + this.ratio * (pathEndOffset - pathStartOffset);

                                                  if (incrementingingNumber() % flickerFrequency) { gsap.set(devOpsPathSparkle, {fill: sparkleGradientBlueFlicker, scale: sparkleExtraScaleFactor}); }

                                                  else { gsap.set(devOpsPathSparkle, {fill: sparkleGradientBlue, scale: sparkleBaseScaleFactor}); }

                                                  if (currentPosition > letterOpacityStart && currentPosition < 1.0) {

                                                  if (currentPosition > letterOpacityStart) gsap.to(devOps_D, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc)) gsap.to(devOps_E, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 2)) gsap.to(devOps_V, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 3)) gsap.to(devOps_O, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 4)) gsap.to(devOps_P, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 5)) gsap.to(devOps_S, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 6)) gsap.to(devOps_dot, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 7)) gsap.to(devOps_C, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 8)) gsap.to(devOps_SecondE, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 9)) gsap.to(devOps_N, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 10)) gsap.to(devOps_T, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 11)) gsap.to(devOps_ThirdE, {opacity: 1.0, duration: 1.0})

                                                  if (currentPosition > letterOpacityStart + (letterOpacityInc * 12)) gsap.to(devOps_R, {opacity: 1.0, duration: 1.0})

                                                  }

                                                   if (currentPosition > .90) { gsap.to(devOpsPathSparkle, {opacity: 0.0, scale: sparkleBaseScaleFactor/5, duration: 0.3}); }

                                                }

                                            }, ">")

[OSUblake]

7 minutes ago, MichaelGaddis said:

My question is this. Since this is a new Chrome thing, is there a known cross browser compatibility issue here? If not--never mind..

 

No. If you think it's an issue with gsap, remove/comment out your gsap code and see if you still get the warning.

 

Are you using WebGL? That's probably the most common use for shared array buffers. GSAP has compatibility with Typed Arrays, but that's the only thing in gsap that could possibility be related to shared array buffers.

 

 

[MichaelGaddis]

Thanks for the quick response. I've been kludge testing around the "bug" by getting rid of timing and just "get one of the letters out." I'll let you know what I find when I find it. It may be more exotic...

[MichaelGaddis]

3 hours ago, MichaelGaddis said:

I'll let you know what I find when I find it

Okay Mea culpa... It wasn't GSAP, GSAP was doing what it was meant to do. I had the color of each letter set to "f7f7f7" instead of "#f7f7f7" and Safari was autocorrecting for me while Chrome and Firefox were not. An obvious error but sometimes you can stare at it for hours and not see it. Kinda like being nose blind to your own stink...  

[OSUblake]

No worries. That's how is goes with programming.