Gutenberg-mobile: [iOS] SafeArea is drawn behind block content

Created on 9 Oct 2019 · 4Comments · Source: wordpress-mobile/gutenberg-mobile

This gives the illusion that the SafeArea (space between the bottom toolbar and the edge of the screen on the iPhone X family (and 11 family) is transparent.

On this screenshot, the SafeArea is red, and the block content is noticeably drown on top of it.

IMG_2A76FBACC416-1

[OS] iOS [Type] Bug

Source

etoledom

👀1

Most helpful comment

Sure! Going to prepare it right now

lukewalczak on 9 Oct 2019

❤1 👍1

All 4 comments

This regression happened on this PR: https://github.com/WordPress/gutenberg/pull/17399
Specifically this line:

https://github.com/WordPress/gutenberg/blob/0e0b65f76d06bcf0cf74bfc659d823289b93bded/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js#L15

The SafeArea have always been hierarchically behind the Block List, but block list never extended beyond the toolbar.

Now with overflow: 'visible', the table content extends until the bottom of the screen, effectively showing over the SafeArea view.

These are screenshots with the After and Before, where the SafeArea is highlighted:

After
Screen Shot 2019-10-09 at 9 06 23 AM

Now:
Screen Shot 2019-10-09 at 9 08 43 AM

My guess is that overflow: 'visible' is needed for the Floating Toolbar to work properly, so we might need to looks for ideas to fix this somewhere else?

cc @pinarol @koke @lukewalczak
@hypest

etoledom on 9 Oct 2019

❤2

@etoledom Thanks for the catch. Actually, we can remove overflow: 'visibile' since it's not needed right now and also it's not needed for FloatingToolbar shippable version.
Once the work over the ideal version for FloatingToolbar will be resume I'll investigate if it's still necessary. Should I prepare quick fix PR for that?

lukewalczak on 9 Oct 2019

Actually, we can remove overflow: 'visibile' since it's not needed right now and also it's not needed for FloatingToolbar shippable version.
Once the work over the ideal version for FloatingToolbar will be resume I'll investigate if it's still necessary. Should I prepare quick fix PR for that?

Thanks @lukewalczak, yes please, could you prepare one quickly? 🙏 Otherwise this can be a blocker to ship the new version. As you said we won't need this for FloatingToolbar shippable version