Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IOS: cannot scroll page with full screen Carousel #1280

Open
hgghyxo opened this issue Mar 14, 2024 · 2 comments · May be fixed by #1353
Open

IOS: cannot scroll page with full screen Carousel #1280

hgghyxo opened this issue Mar 14, 2024 · 2 comments · May be fixed by #1353
Labels
help wanted Extra attention is needed

Comments

@hgghyxo
Copy link

hgghyxo commented Mar 14, 2024

Describe the bug

Trying to make a Carousel full page, as a starting page for a photograpy webpage.
The problem is, when on mobile, you cannot scroll the page if the only visible element is the Carousel.

Looking for a way to disable default touch behaviour on the component, and be able to scrool throu the page, as normally would do.

Probalby not a bug, and works as intended, however frustrating as it is, and wasn't able to find a solution, neither a workaround.

Thank you!

Reproduction

Cannot really reproduce here, as it needs to be run on an IOS device, or use chrome's dev tools, to mimic touch contorls.
Code can be found here or copied down below:
https://stackblitz.com/edit/sveltejs-kit-template-default-n7wsds?file=src%2Froutes%2F%2Bpage.svelte

<script>
  import { Carousel } from 'flowbite-svelte'
  export const images = [
    {
      src: 'https://picsum.photos/id/1/200/300',
    },
    {
      src: 'https://picsum.photos/id/2/200/300',
    },
    {
      src: 'https://picsum.photos/id/3/200/300',
    },
  ]
</script>

<div class="max-w-4xl">
  <Carousel {images} duration="3000" class="h-screen" />
</div>
<div class="bg-green-500 h-96"></div>

Flowbite version and System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 Common KVM processor
    Memory: 2.43 GB / 5.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    bun: 1.0.0 - ~/.bun/bin/bun
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.4 
    flowbite-svelte: ^0.44.24 => 0.44.24 
    svelte: ^4.2.7 => 4.2.12 
    vite: ^5.0.3 => 5.1.6 

Fresh install of sveltekit and flowbite-svelte

  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "autoprefixer": "^10.4.16",
    "flowbite": "^2.3.0",
    "flowbite-svelte": "^0.44.24",
    "postcss": "^8.4.32",
    "postcss-load-config": "^5.0.2",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.0",
    "tailwindcss": "^3.3.6",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
  },
Copy link

stackblitz bot commented Mar 14, 2024

@hgghyxo
Copy link
Author

hgghyxo commented Mar 27, 2024

Original Flowbite Carousel (https://flowbite.com/docs/components/carousel/) does not replicate the same behaviour

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants