UIImageView not clipping to UIView bounds while animating

Question

I have a UIImageView in a UICollectionViewCell that I am moving in relation to a scroll views content offset. This is all to provide a parallax effect when the user scrolls horizontally, however there seems to be a clipping issue when the scroll view begins to scroll.

Instead of clipping, the edges persist and are shown outside of the containers boundaries.

The attached screenshot best showcases the behavior... In the screen shot the scroll view has begun scrolling right and the accompanying views have begun translating however the UIImageView has not clipped its borders to match the receiver. Which in this case should be the transparent UIView.

Here is the UIImageView

let cellImage: UIImageView = {
    let c = UIImageView()
    c.clipsToBounds = true
    c.layer.masksToBounds = true
    c.contentMode = .scaleAspectFill
    c.image = UIImage(named: "tree")
    c.translatesAutoresizingMaskIntoConstraints = false
    c.layer.cornerRadius = 15
    return c
}() 

The UIImageView is then added to a containerView and is set to fill it's bounds.

cellContainerView.addSubview(cellImage)
//add constraints

My thoughts are that if anything this issue may have to do with my interpretation of what the .clipsToBounds property does.

The documentation states:

Setting this value to true causes subviews to be clipped to the bounds of the receiver.

I initially thought the receiver was the view you attached the UIImageView to however that is looking to not be the case. Any suggestions?

Answer 1

As the documentation states:

Setting this value to true causes subviews to be clipped to the bounds of the receiver.

Currently you are setting this property on cellImage ,so in this case it is the receiver, so its subviews will be clipped. But you want to clip this imageview so I think you need to set this property on cellContainerView , since you want its subviews to be clipped.