WTH! New MacBook & Chrome is suddenly scaling an Animate HTML5 doc

[somnamblst]

I guess the mismatch is that the scrolling panel is not scaling for the display, and the Canvas part of the document is.

 

The LG Ultra 27MU88 monitor is not new. The MacBook is. At home on a 27" Dell, same new MacBook, and everything is fine. Get to work and between the new laptop and LG monitor my animation is dwarfed by the z-indexed scroll pane.

 

[GreenSock]

Howdy @somnamblst. Sounds like an odd Adobe Animate thing. Not sure - did you have a GSAP-related question for us? 

[somnamblst]

No. Just that the banner people are pretty savvy. And some use Animate. 

[davi]

Sure you’re not accidentally zooming in on the page?

[somnamblst]

I am not. The size of the canvas animation is correct for that resolution. But the added HTML scroll pane that uses z-index is displaying as if it is resolution agnostic. I realize using z-index puts the scroll pane above since it needs to react to mouse events.

[somnamblst]

This is the CSS. I don't know anything about how resolution effects CSS. 

#scrollpane{
        display:block;
        width:200px;
        position: absolute;
        top: 20px;
      left:40px;
        z-index:100;
        color:#ffffff;
        text-align: center;
       }

 

    ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(255,255,255, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.example {
  display: inline-block;
}