Material-components-ios: [Header] Extra insets injected into tracking scroll views (iOS 11 beta)

Created on 12 Jul 2017  路  5Comments  路  Source: material-components/material-components-ios

Overview

When built against the iOS 11 beta SDK and run on iOS 11, all tracked scroll views of MDCFlexibleHeaderViews appear to have extra insets that are not present on iOS 10.

This is visible in a few ways:

  • The top of scroll indicators is visibly ~20pt below the bottom of the header.
    image
  • If you stretch a flexible header larger than its minimum height
    image
    and let go, it settles on a height larger than its minimum height.
    image

  • In custom layouts where elements are placed based on the content insets, there is ~20pt of extra space at the top of scroll views.

Reproduction steps

  1. Build MDCCatalog on iOS 11 beta 3 SDK and run on iOS 11 beta 3 device/sim.
  2. On home page, scroll and observe scroll indicator.
  3. Tap into "flexible header" tile.
  4. Pull down to stretch header and let go. Observe that it settles at a size that is ~20pt larger than its minimum size.

Version number

26.0.0

Operating system and device

Xcode: Version 9.0 beta 3 (9M174d)
iPhone 7 simulator on iOS 11.0 beta 3 (15A5318e)
iPhone 7 plus on iOS 11.0 beta 3 (15A5318g)

[FlexibleHeader] iPhone X 11 Bug

All 5 comments

So after some investigation, it seems as though iOS 11 (as of the betas) forcefully injects the height of the status bar into any scrollview's contentInset.top and contentOffset.top when the status bar is visible though does not include said injection in the values for those properties (i.e. - calling [scrollView.contentInset].top will return 0 but there is actually an inset of 20) to prevent the status bar obscuring the content view.

screen shot 2017-07-25 at 4 02 33 pm
MDCCatalog (iOS 10.1 vs iOS 11.0)

screen shot 2017-07-25 at 4 02 07 pm
Bare bones tableView Controller (iOS 10.1 vs 11.0)

I'm hesitant to do much modification within the component for this issue as the components won't own the scrollviews they are injected into. Thoughts @brianjmoore @ianegordon ?

I wonder if setting UIScrollViewContentInsetAdjustmentBehavior to .never would be appropriate here? Or is there a way for the flexible header to play nicely with safeAreaInsets?

I'm having the same issue and setting UIScrollViewContentInsetAdjustmentBehavior to .never works like a charm. Thanks @brianjmoore

Unfortunately it turns out that content inset adjustment is super useful when you have safe area insets on other edges besides the top, so disabling it doesn't seem like a great option long-term.

Now that we have the full picture behind safe area insets, I think it's worth designing a fix that works with UIKit safe area insets and content inset adjustment as much as possible. Ideally, apps shouldn't need to disable adjustment at all to use MDCFlexibleHeader.

This has been fixed (we should've done it sooner though).

Was this page helpful?
0 / 5 - 0 ratings