Jump to content
Search Community

Flicker effect on Edge browser.

Gabuardi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am dealing with a bug that seems be present only on Microsoft Edge < 15.

Someone here know how resolve it or what is causing this?

 

Chrome, Safari, Firefox, IE 11.

ezgif-6-2be5cd7905e4.gif

 

Edge < 15

ezgif-6-aeb427cfa07f.gif

Here is the code for the animations.

function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) {
  var widthHalf = maxWidthPercentage / 2;
  return TweenMax.to($element, durationSeconds, {
    width: maxWidthPercentage + '%',
    top: '-=' + widthHalf + '%',
    left: '-=' + widthHalf + '%',
    repeat: 1,
    yoyo: true
  });
}

  

See the Pen d91be8899582064151804a5108557ca5 by bv-design (@bv-design) on CodePen

Link to comment
Share on other sites

Is there any particular reason you're not just using scale instead of width/top/left? It'd probably perform much better too. Transforms are faster for the browser to render. Your code would be simpler too. 

 

As for why Edge is rendering it oddly, that's tough to say without seeing it in the browser - do you have a reduced test case, perhaps in codepen? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...