This seems to work now:
Moving the .box2 out of .world:
<div class="world">
<div class="box1">
<div class="box1_a"></div>
</div>
</div>
<div class="box2">
<p>Some Text</p>
</div>
and adding .world and .box2 both transform-style flat:
TweenMax.set(jQuery('.world, .box2'), {
perspective: 1600,
transformStyle: "flat"
});
and setting the .box1 its own perspective and the transform-style preserve-3d:
TweenMax.fromTo(jQuery('.box1'), 5, {
rotationX: -360,
rotationY: -70,
transformStyle: "preserve-3d"
}, {
rotationX: 50,
rotationY: 30,
repeat: -1
});
solves the problem, and let the .box2 set over/under the 3d rendered group by its z-index now also in Safari, not just in Chrome !!
So, i am happy and ok now. Sorry for being a pain.. guys, and hope this helps somebody else also one day.
This is how the Code Pan looks like now:
See the Pen WQpNBg by themepunch (@themepunch) on CodePen
Cheers and thanks,
Krisztian from ThemePunch
themepunch's post in Safari vs Chrome Rendering 2D over 3D was marked as the answer