Chome timeline - adding child causes extra layout / reflow events - google-chrome

Question

I'm currently working on a website, which has a page with 2 big images (combined around 9000px) in them. The idea is that people can click and drag, to see the sides of the image, just like google maps.
At first I built it with just the 2 images next to each other. When animating the parent div on drag, I managed to only get a composite paint once in a while, but no actual paint (draws). I did this by editing the translate3d on the mouse events.
This all worked like a charm and very smooth, until I added an extra div to the parent. Now when I change the translate3d, it has to do a complete recalculate style -> layout -> paint -> composite layers.
So at first the structure was:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
</div>
When changing the translate3d, all was good, just had a Composite Layers once in a while.
However, when I change it to the following, all goes bananas:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
<div>+</div>
</div>
So like said before, now when editing translate3d, it has to do a complete Recalculate style.
I made sure the div and images both had layers by adding translateZ(0) on them, that didn't help though :(
I'm pretty sure I don't understand the whole paint sequence of chrome to the detail, but after countless hours of reading I can't find the exact thing. I hope someone can shed some light on this matter.
Thanks a bunch!
Edit after Paul's reply:
The Recalculate Style is triggered by the following line:
this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';