Delay in redrawing, until scrolling

[Gary Griswold]

I am using TweenMax to animate the appearance and scaling of a Popup.  It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup.

 

The popup is just a div with three lines of text in three p elements.

 

The animation of the popup is done as follows:

 

var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px';

that.rootNode.appendChild(that.viewRoot);

TweenMax.set(that.viewRoot, { scale: 0 });

TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true });

 

The css for the popup is as follows:

 

#attribution {

  position: fixed;

  width: 80%;

  top: 10%;

  margin-top: 7%;

  margin-left: 7%;

  margin-right: 7%;

  padding: 3%;

  text-align: center;

  z-index: 200;

  background-color: rgba(255, 246, 233, 0.9);

  border-radius: 25px;

  border: solid;

  border-width: thin;

  box-shadow: 4px 4px 4px #777;

  -webkit-box-shadow: 4px 4px 4px #777;

}

 

Any ideas what could cause the delay in drawing, which sometimes occurs?  When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll.

 

Thanks for any help.

 

[GreenSock]

Hm, nothing is ringing a bell, no. Very difficult to troubleshoot blind - do you have a reduced test case as a codepen that we can look at? Is this happening in all browsers and OS's? Just one? The more details you can provide, the better we'll be able to help This smells like a browser rendering issue, possibly related to your video card (but maybe not).