Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Flicker effect on Edge browser.

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.



Edge < 15


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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

@GreenSock Thanks for your fast answer!


Scale was my first option for the animation, but safari show an issue where the Icon Dollars not appear.


I just have included an codepen example to original post above.


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.