search

hotwired / turbo-android

Android framework for making Turbo native apps
MIT License
407 stars 51 forks source link

Scrollable elements are triggering pull to refresh #294

Closed leonvogt closed 4 months ago

leonvogt commented 7 months ago

I'm not quite sure if this is a Turbo Android related Issue or more a Android WebView thing. Following problem: Scrollable elements (elements with overflow-y: scroll) are currently not really usable in Turbo Android.
As soon as you try to scroll up, the pull to refresh feature is triggered.
This is not a new problem, these issues are describing a similar problem: #243, #230

I'm opening this issue to showcase a small reproducible example:

  1. Open and setup the demo project
  2. Change the BASE_URL from "https://turbo-native-demo.glitch.me" to a custom destination
  3. Paste the following example website to the custom destination:
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="module">
      import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';
    </script>

    <style>
      .overflow-scroll-demo {
        background-color: lightblue;
        width: 200px;
        height: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>

  <body>
    <div class="overflow-scroll-demo">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
  </body>
</html>

Output on Turbo-Android:

https://github.com/hotwired/turbo-android/assets/17851143/bbe2028d-2e59-41d4-84f4-e2b84cd679b5

Output on Turbo-iOS:

https://github.com/hotwired/turbo-android/assets/17851143/60c80ba7-7037-437b-a9b0-1ffaf7e7ecda

Does someone have an idea how to go forward with this issue?