Leaflet: Get scaled bounding box by zoom level

I am trying to make a projection on how the next bounds will look like. Here is a plunkr: https://plnkr.co/edit/sk6NRh51WZA2vpWP

This is how I got it working, but it is not very efficient:

const originalMapElement = document.getElementById('map');
const lMap: any = L.map(originalMapElement);


// working but very inefficient
// ----------------------------
function getScaledBounds(center, zoom) {
  const fakeDiv = document.createElement("div");
  fakeDiv.style.display = "block";
  fakeDiv.style.visibility = "hidden";
  fakeDiv.style.width = originalMapElement.offsetWidth + "px";
  fakeDiv.style.height = originalMapElement.offsetHeight + "px";
  document.body.appendChild(fakeDiv);
  const fakeMap = L.map(fakeDiv);
  fakeMap.setView(center, zoom, { animate: false });
  return fakeMap.getBounds();
}

My two other programmatic approaches are very close and yield almost but not quite the same results as the first function above:

function getScaledBounds(center, zoom) {
  const centerPoint = lMap.project(center, zoom);
  const viewHalf = lMap.getSize().divideBy(2);
  const projectedBox = new L.Bounds(centerPoint.subtract(viewHalf), centerPoint.add(viewHalf));
  return L.latLngBounds(
    lMap.unproject(projectedBox.getBottomLeft(), zoom),
    lMap.unproject(projectedBox.getTopRight(), zoom),
  );
}

function getScaledBounds(center, zoom) {
  const zoomFactor = Math.pow(2, zoom) * 2;
  const dw = originalMapElement.offsetWidth / zoomFactor;
  const dh = originalMapElement.offsetHeight / zoomFactor;
  const centerPoint = lMap.project(center, zoom);
  return L.latLngBounds(
    lMap.unproject(new Point(centerPoint.x - dw, centerPoint.y + dh, false), zoom),
    lMap.unproject(new Point(centerPoint.x + dw, centerPoint.y - dh, false), zoom),
  );
}

Does anybody have a solution for this problem? Or can someone explain why all of these yield different results, while they should return the same value in my understanding?

from Leaflet: Get scaled bounding box by zoom level