Header floating groups on iOS 11 and iPhone X

When I use a floating group aligned to the top of the page as a page header, the floating group does weird things on iPhone X and iPhones running iOS 11. The floating group only goes up to about half an inch from the top of the screen, not the very top of the screen, leaving a transparent area at the top. What’s worse, when I scroll down the page, the content is visible above (and behind) the header. Is there some CSS that can be added or something changed from Bubble’s end to fix this?

In the screenshot, the yellow floating group should be aligned to the very top of the screen. It looks fine on android and older iPhones. But there’s a problem with iOS.

1 Like


Is this when you view it in a browser, or as a hybrid app made by GoNative, Phonegap, or other webview solutions? Or both?

Hey Andrew. Great question. This actually does NOT happen when I view my page in a browser. It only happens when I create a shortcut to my site on my phone’s home screen. When I open my app from the HOME SCREEN SHORTCUT, it displays as if it were a real app (without the Safari UI), BUT…now I have that ugly empty space at the top.

Any help would be greatly appreciated.

1 Like

New version of iOS 11, hope someone has a fix.

This topic was automatically closed after 14 days. New replies are no longer allowed.