[Stuttering effect for marginRight on background element in Apple iOS Safari]

I did try replacing marginRight with x in the JavaScript section, however the background itself won't repeat after passing 70-80% mark.

Which CSS properties would be required to be modified in order to allow the background itself to have an infinite loop of the same image, but having the JS animate on the x property instead of marginRight?

[Stuttering effect for marginRight on background element in Apple iOS Safari]

I noticed that very specific to  Apple iOS mobile devices using the Safari browser on mobile, using the animation effect marginRight for background elements having a background-image with repeat-x seemed to have a stuttering effect. When viewed in desktop browsers and browsers other than Safari, the stuttering effect on the background repeated element is not seen. Is it because of one of the CSS effects I applied, which is the width != 100%, or is it the way GSAP JavaScript code is written? Please kindly view the Codepen attached. All good helpful feedback appreciated!

See the Pen jaJwbO by opila (@opila) on CodePen

[Why does Greensock animations works only on some Chrome browsers?]

Hi OSUBlake,

 

I have taken your advice on changing the JS syntax as well as GSAP tweens and syntax changes.

I have also tested the changes in my localhost, and while the performance has improved only slightly when running in Chrome, performance in Safari still suffered.

So I resorted to removing CSS rules one by one.

I realized that this set here is causing a major performance hit in all browsers:

.animation-element {
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -ms-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  -o-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

Project requirements requested by the client include use of drop-shadows on image elements.

So it is likely that the filter CSS rules can be applied to all browsers except Safari browser.

 

Another discovery I have made: the "image flickering" is caused by applying the Tween onto the div containing the image instead of the image itself.

Making some changes, the unwanted flashing effect didn't happen again.

TweenMax.from(".div-animation-element img", 2.1, {
  rotation: -270,
  repeat: 3,
  ease: Quad.easeInOut
})

 

[Why does Greensock animations works only on some Chrome browsers?]

To answer Johnathan's questions:

 

OS: Mac OSX 10.11.6 El Capitan

Google Chrome: v62.03 (It was updated silently after I reboot? It was v61 yesterday)

 

Here is my CodePen: 

See the Pen JOEQQZ by opila (@opila) on CodePen

 

I noticed something too: when it is running in Safari, it won't load and lag significantly, not sure what gives?

 

Another question: in Firefox, if I were to use GSAP to apply rotation animations onto divs instead of the img within that div, it would animate just fine. But the very moment in Chrome I were to use GSAP to do the same rotations onto divs (instead of the imgs within), it would cause the flickering. What gives? It appears intermittent too; like in other Mac OSX machines and laptops, even in Chrome theirs would work fine without the code changes. I wonder what's causing this inconsistent behaviour?

[Why does Greensock animations works only on some Chrome browsers?]

19 hours ago, GreenSock said:

Welcome to the forums. We'd love to help - it's just really difficult without some kind of reasonable reduced test case that clearly reproduces the issue. This doesn't sound like a GSAP-related issue, but I could be wrong. It looks like you've got some PHP intermingled in that HTML. A codepen would be ideal, but even some live site would be better than a copied/pasted version of all the HTML, CSS, and JS for us to try to parse through and guess. Any chance you could provide that? 

https://goo.gl/VaK1m3

This link is temporary for security reasons.

[Why does Greensock animations works only on some Chrome browsers?]

I have been testing a set of Greensock Animation code on a Javascript file and seems to be working quite fine.

I am using Chrome 61.03, and a designer who is testing my code seems to have it work initially.

However, the very moment that the designer was reloading the code to run it again, all the images which were not transformed initially or animated would disappear immediately upon animation start.

I was trying to tell that designer that it could be a cache issue or a browser issue; go update it or something. She refused to budge. I don't know if she is using some outdated version of Chrome browser. 

 

Anyway, here is the code that I have; it's difficult to separate into independent working modules to put into some CodePen or something.

I split the code into JS, CSS, and HTML.

Is it a code issue that causing this to happen on only some browsers?

 

See the Pen JOEQQZ by opila (@opila) on CodePen