Disproportional overflow scrolling on scaled element

  css, html, javascript, scale, transform

I’m creating a HTML Canvas pixel art game.

I’ve got a problem with the scaling being disproportionate.

The div that wraps most of the DOM as the following styling:

.ui {
  pointer-events: none;
  position: absolute;
  width: 50%;
  height: 50%;
  transform: scale(2);
  transform-origin: 0 0;
}

This works well and all content is nicely scaled.

But then I’ve got a nested structure something along the lines of:

.ui > .wrapper > .side-bar > .content-holder > .shop > .shop-entries

That last one .shop-entries has the following style:

.shop-entries {
  flex: 1;
  overflow: auto;
}

Its parent .shop has the following styles:

.shop {
  display: flex;
  max-height: 100%;
  flex-direction: column;
}

For some reason, the scroll is going twice as fast as it’s meant to.
See gif:

weird scrolling behaviour

Did anyone fight with this before?

Source: Ask Javascript Questions

LEAVE A COMMENT