Scrollbar incorrectly appears underneath UICollectionView section header
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.
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.
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 }}