This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordi Martinez Ortega
Posted Oct 30 - Read on Facebook

I found if I set a perspective on a Layer and make it scrollable Safari on iOS doesn't render 3D anymore. any way I can work around it? Thanks

2 Comments

Jordi Martinez Ortega

I actually isolated the problem. Layers lose their 3D rendering when the parent Layer is given a perspective, a scroll = true and there's actually subLayers overflowing the viewable area.

bg = new BackgroundLayer backgroundColor:"white"

# Add a wrapper for the card, it can be transparent
cardWrapper = new Layer backgroundColor:"#ccc" , width:500, height:500
cardWrapper.scroll = true

cardWrapper.style["-webkit-perspective"] = "500px"
cardWrapper.bringToFront()

# Now add the card to it
card = new Layer width:300, height:300, superLayer:cardWrapper
card.center()
card.clip = false

next = ->
card.animate
properties: {rotationY:card.rotationY+180}

card.on Events.AnimationEnd, next

card2 = new Layer width:100, height:200, superLayer:cardWrapper, backgroundColor:"#FC0", superLayer:card
card2.center()

# this is the layer that breaks the 3D Effect
# if it's not added to the Wrapper, everything works fine

card3 = new Layer
width: 200, height: 100, backgroundColor : "#C33", superLayer:cardWrapper, y : 500

next()

Koen Bok

Ha very interesting. I guess a native Framer scrollview would solve this. I'll make a note of this. Thanks for reporting.

Read the entire post on Facebook