dblack
Hologram website navigation problems on mobile
I’m experiencing a little navigation issue with the docs on mobile (android).
When I open the menu, and click a link, the page opens but I can’t scroll down the page (it feels like an overlay remains on the page after the menu has slid away).
To work around this, I open the menu again, then close it and I can now scroll.
First Post!
Most Liked
bartblast
Apparently there was a post on Hacker News about Hologram that made it to the front page: https://news.ycombinator.com/item?id=42710376, and a lot of people experienced the same issue as you, somebody even created a bug report: Slow navigation in the documentation · Issue #165 · bartblast/hologram · GitHub
Here are my findings (copied from the GitHub issue):
I identified a bug in Hologram’s patching mechanism which occurs when root element (html) attributes are modified during navigation. This happens in this case because the html element gets a Tailwind overflow-hidden class when the menu opens to prevent scrolling underneath the menu container.
The noticeable lag (~500ms) will remain for a while as this is Hologram 0.2.0 (an alpha release, see: 🎉 Hologram - An Isomorphic Elixir Web Framework is Here!) with some temporary implementations:
- The current bitstring implementation is very inefficient (since templates are essentially long bitstrings, this significantly impacts performance)
- There’s extensive logging for debugging
- Every action triggers a full template re-render
These issues are scheduled to be fixed in upcoming releases.
The Hologram fix has been applied to the website - could you confirm if the menu works correctly now (aside from the noticeable lag)? Navigation to the next page should be fast; only opening/closing the menu without clicking a link should have the noticeable lag.
dblack
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









