Fixing delayed styles

framer/Layer.coffee

@@ -20,6 +20,8 @@ Utils = require "./Utils"

NoCacheDateKey = Date.now()

delayedStyles = ["webkitTransform", "webkitFilter", "webkitPerspectiveOrigin", "webkitTransformOrigin", "webkitBackdropFilter"]

layerValueTypeError = (name, value) ->
	throw new Error("Layer.#{name}: value '#{value}' of type '#{typeof(value)}' is not valid")

@@ -62,7 +64,7 @@ layerProperty = (obj, name, cssProperty, fallback, validator, transformer, optio
					mainElement?.style[cssProperty] = @_properties[name]
					subElement?.style[cssProperty] = @_properties[name]
				# These values are set multiple times during applyDefaults, so ignore them here, and set the style in the constructor
				else if not @__applyingDefaults or (cssProperty not in ["webkitTransform", "webkitFilter", "webkitPerspectiveOrigin", "webkitTransformOrigin", "webkitBackdropFilter"])
				else if not @__applyingDefaults or (cssProperty not in delayedStyles)
					style = LayerStyle[cssProperty](@)
					mainElement?.style[cssProperty] = style
					subElement?.style[cssProperty] = style
@@ -195,11 +197,12 @@ class exports.Layer extends BaseClass
		@__applyingDefaults = true
		super Defaults.getDefaults("Layer", options)
		delete @__applyingDefaults
		@_element.style["webkitTransform"] = LayerStyle["webkitTransform"](@)
		@_element.style["webkitFilter"] = LayerStyle["webkitFilter"](@)
		@_element.style["webkitTransformOrigin"] = LayerStyle["webkitTransformOrigin"](@)
		@_element.style["webkitPerspectiveOrigin"] = LayerStyle["webkitPerspectiveOrigin"](@)
		@_element.style["webkitBackdropFilter"] = LayerStyle["webkitBackdropFilter"](@)

		for cssProperty in delayedStyles
			element = @_element
			if cssProperty in @_stylesAppliedToParent
				element = @_parent._element
			element.style[cssProperty] = LayerStyle[cssProperty](@)

		# Add this layer to the current context
		@_context.addLayer(@)

framer/SVGBaseLayer.coffee

@@ -115,6 +115,8 @@ class exports.SVGBaseLayer extends Layer
		@calculateSize()
		if @_parent instanceof SVGLayer
			@_stylesAppliedToParent = ["webkitTransform"]
			for prop in ["x", "y", "z", "scaleX", "scaleY", "scaleZ", "scale", "skewX", "skewY", "skew", "rotationX", "rotationY", "rotationZ", "force2d"]
				options[prop] ?= @_parent[prop]

		super(options)

test/tests/SVGPathTest.coffee

@@ -30,12 +30,12 @@ describe "SVGPath", ->

	describe "positioning", ->
		it "should proxy the transform property to the SVGLayer if that is it's direct parent", ->
			path.x.should.equal 0
			path.y.should.equal 0
			path.x.should.equal 123
			path.y.should.equal 456
			path.x = 23
			path.y = 17
			path.x.should.equal 23
			path.y.should.equal 17
			svg.x.should.equal 123
			svg.y.should.equal 456
			svg.x.should.equal 0
			svg.y.should.equal 0
			svg._element.style.webkitTransform.should.equal "translate3d(23px, 17px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"