Giter VIP home page Giter VIP logo

Comments (2)

endigo9740 avatar endigo9740 commented on July 20, 2024 2

@Keagel unfortunately this is one of several known issues with using the App Shell. Basically the App Shell abstracts scrollable region to a sub-panel within the shell, rather than allowing the entire <body> element to scroll. I've created a diagram to help visualize this:

Screenshot 2024-04-05 at 4 44 29 PM

Mobile Safari is setup to hide the bottom panel only when it detects the <body> is being scrolled, which of course never happens in the App Shell.

You can see some discussion around the topic here:
https://stackoverflow.com/a/75648985

image

Sadly I don't think there's anyway to get the behavior you're asking while using the App Shell. Even setting different height values doesn't help here, because the <body> never scrolls. For example, you can try something like:

<AppShell class="!h-[100svh]">
	<!-- ... -->
</AppShell>

If you prefer the bottom panel to auto-hide on scroll, then I recommend you move away from the App Shell and create your own custom layout which leans into the body scroll. While a bit more effort, it will help avoid some other common App Shell related issues:

  • Pull down to refresh not working on mobile (may be Android only)
  • Print styles not working as expected
  • Plus a few niche a11y issues

Furthermore, given these issues, we're actually taking a pretty hard stance on not bringing the App Shell forward to Skeleton v3. We're going to make the recommendation that folks construct their own custom layouts. So it would likely be advantageous to get a head start on this sooner than later.

Hope this helps, and sorry we can't do more!

from skeleton.

Keagel avatar Keagel commented on July 20, 2024 1

For now I'm not bothered by the bottom panel staying visible but I'll make the necessary changes since the App Shell won't be coming to v3. Thanks for the thorough answer!

from skeleton.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.