Scrollbar incorrectly appears underneath UICollectionView section header

Question

For some reason my scrollbar always appears underneath the collection view section header. Any help is greatly appreciated!

Answer 1

I found a workaround. This issue is that the zPosition of the header view is being set by the collection view incorrectly. To fix this, we will always ensure that the zPosition is our desired value.

Create a CALayer subclass which prevents the zPosition from being anything other than 0.

class CustomLayer: CALayer {
    override var zPosition: CGFloat {
        get { return 0 }
        set {}
    }
}

Then set the layer class of your collection view header to this new subclass.

class MyHeaderView: UICollectionReusableView {

    // your other custom code here

    override class var layerClass: AnyClass {
        get { return CustomLayer.self }
    }

}

This is an iOS 11 bug, as this issue does not occur in iOS 10. Hopefully this works well enough until the bug is fixed.

Answer 2

Same concept, but here is a simpler workaround that doesn't require your UICollectionReusableView instances to use a subclass.

Conform to UICollectionViewDelegate (if you don't already) and implement willDisplaySupplementaryView protocol method like so:

func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath) { view.layer.zPosition = 0.0 }

Tested in iOS 11.2.1.

Answer 3

Here is my alternative which seems to work better on iOS12 when subclassing UICollectionReusableView.

final class BasicCollectionSectionHeader: UICollectionReusableView {
    override var layer: CALayer {
        let layer = super.layer
        layer.zPosition = 0 // make the header appear below the collection view scroll bar
        return layer
    }
}