Background image in NavigationBar doesn´t fill width after adding mask layer

I’ve added an image as background to my NavigationBar and implemented a Bezier Path on top of it to make an triangle. However, when I added the path it won’t fill the entire width in Storyboard, but it works when I run the app in the emulator.

Here´s the code:

class NavigationBar: UINavigationBar {

@IBInspectable var height: CGFloat = 70

@IBInspectable var backgroundImage: UIImage = UIImage() {

// set height of NavigationBar
open override func sizeThatFits(_ size: CGSize) -> CGSize {
    return CGSize(width: self.frame.size.width, height: height)

func updateView(){
    // set background image on NavigationBar
    self.setBackgroundImage(backgroundImage.resizableImage(withCapInsets: UIEdgeInsetsMake(0, 0, 0, 0), resizingMode: .stretch), for: .default)

    let shapeLayer = CAShapeLayer()
    let trianglePath = UIBezierPath()

    trianglePath.move(to: CGPoint(x: 0.0, y: 0.0))

    trianglePath.addLine(to: CGPoint(x: 0.0, y: 140))

    trianglePath.addLine(to: CGPoint(x: self.bounds.width, y: height))

    trianglePath.addLine(to: CGPoint(x: self.bounds.width, y: 0.0))

    shapeLayer.path = trianglePath.cgPath
    shapeLayer.frame = self.bounds
    self.layer.mask = shapeLayer

Here´s the Storyboard (Doesn´t fill width)

Here´s the Emulator (Looks correct)