search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
85 stars 9 forks source link

On mobile the navigation/action buttons show up only when double-scrolling to the bottom, but need to be visible always #151

Open marisveide opened 1 year ago

marisveide commented 1 year ago

Describe the bug

On mobile - when opening the app, there is no navigation/action buttons visible. When I scroll to the bottom of the page, they still are not visible. When I scroll down once more, only then they appear - from the outer iframe, which comes into visible space. Then, when I scroll up, the action buttons stick to the bottom of the screen, as expected.

To Reproduce

Steps to reproduce the behaviour:

  1. Open the Shopify Admin in mobile Chrome browser.
  2. Launch the Matrixify app: https://admin.shopify.com/store/<your-store>/apps/excel-export-import
  3. See that there are no action/navigation buttons visible anywhere.
  4. Scroll down to the bottom - still, no buttons visible.
  5. Scroll down once more - buttons will show as an oversized iframe.
  6. But the app header with App title and breadcrumbs will scroll up out of the visible screen.

See the video recording that demonstrates the issue: https://youtu.be/7XCdbN8t6IE

Also, see the following screenshots: 1 - navigation not visible

2 - navigation visible, but header not visible

3 - navigation obscured by yellow notice

Expected behaviour

  1. The action/navigation buttons should be visible instantly, when opening the app.
  2. The app top header/breadcrumbs should not disappear.
  3. The bottom "Store transfer disabled" notice should not obscure the action buttons.

Contextual information

Packages and versions

Platform

Additional context

Maybe it is also related to the bottom yellow banner that shows that store transfer is not possible - because it too eats up the space from the bottom. But this issue shows up even if I close that notice.

@itissible/matrixify

kaarelss commented 1 year ago

Also seeing this issue

AaronSpringut commented 1 year ago

Thanks for reporting this! We've triaged this as high priority and will try to get a fix out as soon as we can.

joeyfreund commented 1 year ago

@marisveide , I managed to reproduce the issue on my iPhone in Safari.

One quick question ... If you add <meta name="viewport" content="width=device-width, initial-scale=1" /> to the HEAD section of your HTML, does it solve the problem?

marisveide commented 1 year ago

Hey, @joeyfreund ! Thank you for digging this... I have tried to put this line in the Ruby on Rails project embedded_app.html.erb file like this - but sadly it does not make any difference.

I tried on iPhone 13 Plus, Chrome browser. The outer iframe is still larger than the viewport, so it can be scrolled up, to show the bottom part with action buttons.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <% application_name = ShopifyApp.configuration.application_name %>
  <title><%= application_name %></title>
...
forsbergplustwo commented 1 year ago

Also seeing this on iOS Safari. The buttons show up at the top if you are in landscape, but on partrait nothing shows (except unless you double scroll at bottom). Does not help with meta tag either 😔

EDIT: Easy way to reproduce. Swipping (scrolling) inside the app iframe does not reveal the buttons. Swipping on the Shopify controlled part of the page (top bar) reveals the buttons at the bottom. So it seems the height set on the iframe part of the viewport is set too high. It cannot show the top bar, app iframe & actions at the same time stacked vertically.