[web] Scroll is not recognized by the browser

jamesblasco commented 3 years ago

Steps to Reproduce

Flutter is painted on a canvas and the browser doesn't detect the scroll.

This causes problems when the native browser uses the scroll to perform their own actions.

Current problems:

Safari and Chrome iOS/Android address and bottom bar navigation doesn't collapse when scrolling: Issues: https://github.com/flutter/flutter/issues/64572 https://github.com/flutter/flutter/issues/68877

Current behavior	Expected behavior (would also need to scroll)

iOS scroll to top by tapping on the status bar doesn't work. A feature available for any website in any ios browser or WKWebView
iOS GoogleMaps, Google Assistant, Facebook & Facebook Messenger displays in-app websites inside a draggable modal. Because of scroll is not detected, the modal is closed instead of scrolling upwards.

pedromassangocode commented 3 years ago

Issue reproducible on latest master channel.

flutter doctor -v

``` [✓] Flutter (Channel master, 1.24.0-7.0.pre.47, on Mac OS X 10.15.7 19H2 darwin-x64, locale en) • Flutter version 1.24.0-7.0.pre.47 at /Users/pedromassango/dev/SDKs/flutter_master • Framework revision 2f18e0b23d (20 hours ago), 2020-11-01 20:58:04 +0530 • Engine revision 3460519398 • Dart version 2.12.0 (build 2.12.0-3.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1) • Android SDK at /Users/pedromassango/Library/Android/sdk • Platform android-30, build-tools 30.0.1 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 12.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.1, Build version 12A7403 • CocoaPods version 1.9.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] IntelliJ IDEA Community Edition (version 2020.2.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 50.0 • Dart plugin version 202.7319.5 [✓] VS Code (version 1.50.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.16.0 [✓] Connected device (4 available) • iPhone 12 Pro Max (mobile) • ECCF5C4A-8BEC-411D-B23E-85A836C3847E • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H2 darwin-x64 • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 86.0.4240.111 • No issues found! ```

yjbanov commented 3 years ago

I thought we had a duplicate issue for this, but I failed to find one. I'm accepting this as a feature request.

yjbanov commented 3 years ago

I've been thinking about some ideas for fixing this. Leaving this idea before I forget: the web engine could use a signal from the framework that there's a scrollable area that the user is interacting with as well as when the start/end has been reached. We could then make the body element (or some other top-level element) scrollable while keeping the Flutter View in a fixed position. The browser will see the element scrolling and react appropriately.

yjbanov commented 3 years ago

@jamesblasco Curious how did you get it to behave correctly in the "Expected behavior" screen recording?

jamesblasco commented 3 years ago

Hey @yjbanov, you can see a detailed ex planation in this comment

https://github.com/flutter/flutter/issues/68877#issuecomment-720091525

Update - Added comment:

Here is some research I have been doing related to this problem:

The safari mobile WebKit uses the body scroll to handle this interaction. This requires the body overflow-y attribute to be set to auto/scroll and the body to have a size longer than 100%. Obviously, this is not the case for any flutter web as by default overflow is hidden. After changing that I couldn't make it work programmatically by calling window.scrollTo(...) or windowScroll(). Only user manual drag worked.

By overriding, some of the default CSS attributes added by the flutter framework I manage to hide the bars. But also it broke most of the hitTest inside the flutter framework.

I also couldn't remove the scrollbar that appears after making these changes.

You have the demo here: https://jamesblasco.github.io/flutter-web-scroll/

You can add this to the <head> of the index.hml file of any flutter project and try it also there.


  <style>
    body {
      height: 500vh !important;  /* Bigger than 100% to allow scroll */
      position: static !important;  /* Override absolute from flutter */
      overflow-y: scroll !important; /* Allows verticall scrolling */
      overflow-x: hidden !important;
      touch-action: pan-y !important;  /* Allows vertical scrolling */
      overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
    }

     /* Centers flutter canvas with a size of the viewport*/
    flt-glass-pane {
      position: fixed !important; /* Overrides absolute from flutter  */
      top: 50vh  !important;
      left: 50vw  !important;
      max-width: 100vw  !important;
      max-height: 100vh  !important;
      transform: translate(-50vw, -50vh)  !important;
    }

    /* 
    Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and  -webkit-overflow-scrolling: touch; 
    Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
    */
    ::-webkit-scrollbar {
      display: false;
      width: 0px;
      height: 0px;  /* Remove scrollbar space */
      background: transparent;  /* Optional: just make scrollbar invisible */
    }

  </style>

abar-75 commented 3 years ago

Hi, is there any update on this? I have the same issue, the scroll isn't recognised when I open the app from a link in a facebook post or messenger.

jamesblasco commented 3 years ago

I've just discovered it also happens with the Google Assistant app. There is no way to scroll up

Update: Same problem in Google Maps

Mravuri96 commented 3 years ago

I thought we had a duplicate issue for this, but I failed to find one. I'm accepting this as a feature request.

Might that be this? #67832. if not, mentioning it here as it's in the same realm.

ayushin commented 2 years ago

Yes, this should really be fixed in flutter, not in css / index.html

jamesblasco commented 2 years ago

@ayushin the problem is that browsers do not provide an api to control this behavior and it is automatically sync with the body scroll

ayushin commented 2 years ago

But some PWAs manage it quite well still, like: https://www.wsj.com/

MorelSerge commented 2 years ago

How has this issue been known for 8 months and not fixed yet. This is yet another issue that makes the "cross platform" Flutter a stupid advertisement. This breaks any scrollable flutter web app on iOS (a lot of people use the in-app browsers).

EDIT: The aforementioned solution doesn't work with scrollable containers (SingleChildScrollView, ListView, ..), on top of that, scrolling with the above solution causes a re-render because the size changes which can cause very buggy behaviour if you're loading e.g. images or content on render.

EDIT2: Live example: https://hivesey-88262.web.app/

MarcelWilming commented 2 years ago

@ayushin how do you get this working in a PWA ?

ayushin commented 2 years ago

Nope

MarcelWilming commented 2 years ago

@ayushin Do we have a workaround for a scrollView ?

ayushin commented 2 years ago

@MarcelWilming Not at the moment, I don't think I am the right person to ask.

hightman commented 2 years ago

I also encountered this problem, but it seems that there is still no solution. Because only scrolling on the body element can trigger the hiding URL bar of iOS-safari, all scrolling of flutter-web are not on the body, so I can't think of a way to modify or circumvent it.

Piinks commented 2 years ago

There was recently added a new MaterialState.scrolledUnder, this may be useful in implementing this. It is currently being used so the AppBar can change when content scrolls under it, if we could pass that information on to the engine in a meaningful way it might work.

yjbanov commented 2 years ago

This continues to be a problem in Safari iOS 15 (https://github.com/flutter/flutter/issues/90506).

FantasyOR commented 2 years ago

hi, in order for the web application to expand to the full screen and scroll at the same time, it is enough to add this style:

    <head>
   ...

        <style>
            body {
                height: 100vh !important;
                position: static !important;
            }
        </style>
    </head>

skypu3 commented 2 years ago

hi @FantasyOR, it can expand to the full screen, but there is blank area please see the attached:

hightman commented 2 years ago

this seems bug only in iOS15, If you adjust URL bar to top position in safari setting, it may be ok.

在 2021年9月28日，09:24，skypu3 @.***> 写道：

hi @FantasyOR, it still can't expand to the full screen, there is blank area please see the attached:

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

skypu3 commented 2 years ago

@hightman, I did the test, URL bar both on top and bottom, it doesn't work still has blank area on iOS 15.

yjbanov commented 2 years ago

Just leaving these resources for us to look into when we attempt a fix:

Would be interesting to check how Flutter would behave with no engine-side changes if these tags are specified.

josedoes commented 2 years ago

following

FantasyOR commented 2 years ago

hi @FantasyOR, it can expand to the full screen, but there is blank area please see the attached:

maybe your app is not to match height? Please try set:

Scaffold(
        body: Container(
               height: MediaQuery.of(context).size.height,
               child: ...

hightman commented 2 years ago

hi @FantasyOR , After I added those body styles, there are some changes in the result, see GIF attachment. screenshot_flutterweb_ios15

My page is simply created under the scaffold of material, and there is no special setting. There are still two problems:

When I refresh the page, the page sometimes full filled the viewport, sometimes it can’t.
When I scroll the page, a blank space appears at the bottom.

skypu3 commented 2 years ago

any updates on this issue ?

yjbanov commented 2 years ago

@skypu3 No update, unfortunately, but I've been trying to think of ideas for how to fix this. My latest idea is to add a two-way scrolling element under <flt-glass-pane> that would be scrolled by the browser whenever you drag your finger, in addition to reporting the pointer event to the Flutter framework so that Flutter can react to the scroll too. The downside is that if the framework doesn't tell the engine that it's scrolling the browser will always think that you are scrolling and minimize the address bar, even if the drag gesture is used for something else.

@hightman Thanks for trying! This gives me hope that this can work. We used to have issues with Safari temporarily reporting wrong window dimensions upon page load. This looks exactly like that problem. We implemented this hack for pre-13 Safari, but perhaps we still need this hack for newer Safari versions. If you are able to build the engine, could you try removing html.window.visualViewport == null from the if condition?

lyf571321556 commented 2 years ago

following

MorelSerge commented 2 years ago

Just want to mention:

This is breaks any flutter app (with some scrollable content) on iOS Safari popup views. For example the ones opening up when clicking a link in the Messenger app.
It breaks swipe-to-refresh on Chrome (iOS, did not test on Android).

jemutorres commented 2 years ago

Following

Akarshit-Git commented 2 years ago

Following

tarun-goHomely commented 2 years ago

Following

oliverpool commented 2 years ago

Instead of spamming this issue with Following messages, please simply click the Subscribe button on the right side:

(sorry at all the followers for this message not related to the issue)

atgnatus commented 2 years ago

This is a critical issue. I do not think it is fair to say Flutter works on mobile web while this is still open. It dramatically reduces the usable screen size which results in a significantly reduced end user experience.

flutterhands commented 2 years ago

This is a critical issue. I do not think it is fair to say Flutter works on mobile web while this is still open. It dramatically reduces the usable screen size which results in a significantly reduced end user experience.

This.

If not fixable in Flutter, it should at least be fixed in Chrome on all devices. Without such fix we cannot claim Flutter for web is an alternative for anything. Unfortunately, because we love Flutter!

inagornyi commented 2 years ago

Hey Will there be an official solution to this problem? What is the problem to solve and close this bug?

slavap commented 2 years ago

@yjbanov Just FYI, this meta tag

<meta name="apple-mobile-web-app-capable" content="yes">

does not helping with hiding bottom navigation/addressBar at all.

jakusb commented 1 year ago

Please up the priority! Flutter is getting mature and bragging about all platforms it supports. this feature should be supported.

nyermakh commented 1 year ago

Is there any workaround?

matthiaswinfried commented 1 year ago

If not fixed in flutter it would be very nice if there would be any reliable workaround. As mentioned before: "Please up the priority!"

inagornyi commented 1 year ago

Vote and like to up the priority.

inagornyi commented 1 year ago

Is anybody here?

AndreiMisiukevich commented 1 year ago

You can kindly ask your users to hide the toolbar with some popup message on the first app start (not ideal at all, but at least something...)

nyermakh commented 1 year ago

Well, I am developing a website that is intended to be used within in-app web browsers (like within Google Assistant). In this case, asking your users wouldn't help :(

iapicca commented 1 year ago

tagging @huycozy since referenced this issue could you consider adding the crowd label

huycozy commented 1 year ago

@iapicca: Adding crowd label based on the number of affected users and upvotes. Thank you!

Piinks commented 1 year ago

Following up on https://github.com/flutter/flutter/issues/69529#issuecomment-1007736827 @yjbanov

The downside is that if the framework doesn't tell the engine that it's scrolling, the browser will always think that you are scrolling and minimize the address bar, even if the drag gesture is used for something else.

We could probably communicate this pretty easily to the engine. AFAIK that's the easy part. When scrolling is occurring, the framework could maybe use a platform channel to let the engine know? From what I can tell we already have all of the recommended and appropriate Apple meta tags and flags set, if we tell the engine we are scrolling, will your idea with <flt-glass-pane> work?

riusaky007 commented 1 year ago

Hey, Any solution about the

Steps to Reproduce

Flutter is painted on a canvas and the browser doesn't detect the scroll.

This causes problems when the native browser uses the scroll to perform their own actions.

Current problems:

Safari and Chrome iOS/Android address and bottom bar navigation doesn't collapse when scrolling: Issues: [web] Allow Flutter apps to have 13% bigger screen after being scrolled down #64572 Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari #68877

Current behavior Expected behavior (would also need to scroll)

iOS scroll to top by tapping on the status bar doesn't work. A feature available for any website in any ios browser or WKWebView

iOS GoogleMaps, Google Assistant, Facebook & Facebook Messenger displays in-app websites inside a draggable modal. Because of scroll is not detected, the modal is closed instead of scrolling upwards.

Any updates about this? I'm facing the same problem (09/20/2022)

flutter / flutter

[web] Scroll is not recognized by the browser #69529

Steps to Reproduce

Steps to Reproduce