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.

Sign up for GitHub

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

Jump to bottom

Footnotes won’t scroll in Safari until you click/tap in them #23

Open
bdesham opened this issue Jul 14, 2019 · 2 comments
Open

Footnotes won’t scroll in Safari until you click/tap in them #23

bdesham opened this issue Jul 14, 2019 · 2 comments
Labels
bug help wanted

Comments

@bdesham
Copy link
Contributor

bdesham commented Jul 14, 2019

With Littlefoot 2.0.2 under Safari 12 on macOS, if you open a footnote that’s long enough to scroll, you can’t just place your cursor over the footnote text and scroll with the scroll wheel (or trackpad gesture)—this just scrolls the entire page. Instead, you have to click inside the footnote first and then the mouse/trackpad will work to scroll the footnote.

Firefox 67 and Chrome 75 on macOS do not have the same problem.

I don’t have a PR ready for this one, sorry 😉

Steps to reproduce

  1. Open the following HTML file in Safari
  2. Tap on the first footnote button to activate it
  3. Move the cursor onto the footnote text
  4. Use your mouse or trackpad to try to scroll down

Expected behavior: the footnote scrolls down, revealing more of the text.

Actual behavior: the entire page scrolls.

Minimal example

(This is the same example I used for #21.)

<!DOCTYPE html>

<head>
    <title>Footnote test</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/littlefoot.css"/>
</head>

<body>

<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, eleifend vivamus aenean ad nec velit, posuere senectus fermentum gravida faucibus natoque. Sagittis ac commodo nisl neque ornare eleifend et pretium, nec metus sapien pulvinar etiam cubilia.<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a> Morbi bibendum litora phasellus imperdiet at nam cum iaculis proin, eu natoque lacus rutrum lacinia donec arcu suspendisse nostra,<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a> felis fames ad semper eget senectus primis dignissim.</p>

<section class="footnotes">
<hr />
<ol>
<li id="fn1"><p>Volutpat vitae proin mattis lacinia malesuada ullamcorper metus magnis per feugiat, conubia dignissim integer nibh curabitur mauris semper mi sed mollis leo, parturient praesent sapien cras lacus pretium consequat commodo facilisis. Commodo velit feugiat in proin ligula ullamcorper imperdiet euismod, odio ridiculus placerat ante lacus nunc vel donec, non facilisi condimentum turpis justo massa tristique. Aptent curabitur pharetra condimentum porttitor ullamcorper mi nullam sollicitudin primis volutpat, per dapibus leo est sed non donec laoreet penatibus, tortor dui eu porta fames dictum lacinia et ligula.<a href="#fnref1" class="footnote-back">↩︎</a></p></li>
<li id="fn2"><p>I like turtles<a href="#fnref2" class="footnote-back">↩︎</a></p></li>
</ol>
</section>

<script src="https://unpkg.com/[email protected]/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
    littlefoot.default()
</script>

</body>

</html>
@goblindegook
Copy link
Owner

I tried a few approaches to fixing this but no luck so far. I suspect injecting the HTML on click is partly to blame, a few alternative footnote implementations I've seen that instantiate all popovers on start and then merely show/hide them don't present this issue.

@goblindegook
Copy link
Owner

On the latest refactor, I changed the way the popovers are instantiated: they are now created (but not mounted) once during setup, rather than every time the button is clicked.

Now, the problem still occurs, but only after popovers are mounted on the document for the first time. On subsequent activations, scrolling works as normal, which leads me to believe that inserting the element into the document does something to the event handler.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@goblindegook @bdesham