badge position for nodes

I'm trying to add badges to my cytoscape.js nodes. Badges are HTML elements. I'm using bootstrap badges

Here are elements with badges. (the colors of the badges are irrelevant)

When I zoom out, the position of the badges is not set correctly. They go down and right a bit. WHY IS THAT?

Here is my code to set the positions. I but badges to to top left of the node. But I remove width of the HTML element to make it look like inside the node

let z1 = cy.zoom() / 2; // badges look too big with normal size so I downscale them
// e is cytoscape.js element, a node
const p = e.renderedPosition();
const eW = e.renderedWidth() / 2;
const eH = e.renderedHeight() / 2;
// div is an HTML element which is the badge
const w = div.clientWidth;
div.style.transform = `translate(${p.x + eW - w * z1}px, ${p.y - eH}px) scale(${z1})`;

The problem stems from CSS scale. When I scale the element, the center point of the element remains invariant. The below sample shows What I mean

div {
  position: absolute;
}
span {
  font-size: 64px;
}

.s1 {
  transform: scale(1);
  background: red;
}

.s2 {
  transform: scale(0.5);
  background: blue;
}

<div class="s1"><span>00</span></div>
<div class="s2"><span>00</span></div>

So I have to consider the center point of the div. Below code does that

let z1 = this._g.cy.zoom() / 2;
const bb = e.renderedBoundingBox({ includeLabels: false, includeOverlays: false });
const w = div.clientWidth;
const h = div.clientHeight;
const deltaW4Scale = (1 - z1) * w / 2;
const deltaH4Scale = (1 - z1) * h / 2;
div.style.transform = `translate(${bb.x2 - deltaW4Scale - w * z1}px, ${bb.y1 - deltaH4Scale}px) scale(${z1})`;