CSS Transform scale scrolling issue

Question

I am creating a web app that uses CSS\' transform scale property. As shown by the image below, I have an object inside of a container, which fits nice and snugly inside, wit

Answer 1

My best guess would be that this is happening because of transform origin. Try setting it to 0 0 should fix Your issue:

#object2 {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background-color: rgba(255, 0, 255, 0.45);
  border-radius: 25px;
  transform: scale(3);
  transform-origin: 0 0;
}

Demo codepen