Jump to content
GreenSock

themepunch last won the day on January 31 2020

themepunch had the most liked content!

themepunch

BusinessGreen
  • Posts

    115
  • Joined

  • Last visited

  • Days Won

    1

Community Answers

  1. themepunch's post in Safari vs Chrome Rendering 2D over 3D was marked as the answer   
    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
×