hotwired/turbo-android

Scrollable elements are triggering pull to refresh

leonvogt opened this issue · 0 comments

leonvogt commented

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:

turbo_native_android.mp4

Output on Turbo-iOS:

turbo_native_ios.mp4

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