Разные CAAnimation на iphone 6 и iphone 5 с одинаковым кодом

Моя проблема в том, что я создал простой путь с CABasicAnimation от круга до roundedRect. Я просто использую два слоя cashapelayers для каждой формы с помощью uibezierpath, и, поскольку круг может быть показан как roundedrect, я использовал его дважды и добавил их на вид, и он работает как шарм на iphone 6 и выше, но странные вещи происходят с краями, когда я пытаюсь запустить его на iphone 5 и ниже (см. gif). Я борюсь с этим почти 2 дня и понятия не имею. Кстати. красный круг — это кнопка, расположенная над фигурами. Вот код:

class Shapes: CAShapeLayer {
var circleLayer : UIBezierPath {
    return UIBezierPath(roundedRect: CGRect(x: -(buttonWidth/2), y: -(buttonHeight/2), width: buttonWidth, height: buttonHeight), cornerRadius: 15)
}

var roundedRectLayer: UIBezierPath {
    return UIBezierPath(roundedRect: CGRect(x: -(frame.width/2), y: -(frame.height/2), width: frame.width, height: frame.height), cornerRadius: 20)
}

func openMenu(){
    let openMenu: CABasicAnimation = CABasicAnimation(keyPath: "path")
    openMenu.fromValue = circleLayer.cgPath
    openMenu.toValue = roundedRectLayer.cgPath
    openMenu.duration = 0.4
    openMenu.beginTime = CACurrentMediaTime() + 0.2
    openMenu.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    openMenu.fillMode = kCAFillModeForwards
    openMenu.isRemovedOnCompletion = false  
    add(openMenu, forKey: "openMenu")
    }
}    

и это создается в другом классе uiview, который представляет собой белый прямоугольник ниже, следующим образом:

let shapes = Shapes()
layer.addSublayer(shapes)
    shapes.frame = CGRect(x: redButton.frame.midX, y: redButton.frame.midY, width: 320, height: redButton.frame.height + 10)

айфон 5:

Айфон 6: