iPhone problem with resizing objects

Hi there, hoping perhaps someone might have come across this issue before.

I’m building a basic mobile prototype where the user can tap a big circle which then enlarges and moves to become the header of the revealed content. To do this, when the user taps on the circle, I increase its size and reposition it. Crucially, the circle turns from one with regular proportions into a more squashed ellipse, ie it increases in width more than it does in height.

This works absolutely fine in Chrome and on my Android phone (Samsung Galaxy S10) but maddeningly refuses to co-operate on iphones!

It seems the circle is increasing by the same amount in both height and width so that, rather than becoming a squashed ellipse, it becomes a large perfect circle.

I’ve tried a few things to get it working, but have failed spectacularly. Any advice would be gratefully received!

Demo here: