It is a real world project. I got the problem in my project, and then I'm trying to simplify the problem use the codepen demo.
https://stackoverflow.com/questions/27146742/foundation-force-landscape-mode-on-mobile-devices, The rotation feature is something like this. I force a landscape mode when loading a page into a mobile app (the app is portrait itself and screen is locked by OS). There are some animations and drag drops inside the page. Everything works great except drag drop on Android Chrome (Mac Chrome has the problem too). Safari works in my case.
The 'outer1' in the project is like the container, similar to document.body.
The 'outer2' is another div in my project. The svg is in the outer2 div, and there are some drag drop elements inside the svg.
There are also, 'outer3', 'outer4', 'outer5' inside 'outer1', that's why I cannot scale firstly and then rotate.
It will be great if there is a solution for this. Otherwise, I have to deal with another approach for my case.