Transform/Scale doesn't appropriately scale background attachment fixed - html

Question

I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.

Answer 1

https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment