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

Last line of footnote text is cut off under Firefox #21

Closed
bdesham opened this issue Jul 14, 2019 · 0 comments
Closed

Last line of footnote text is cut off under Firefox #21

bdesham opened this issue Jul 14, 2019 · 0 comments

Comments

@bdesham
Copy link
Contributor

bdesham commented Jul 14, 2019

Due to Firefox bug 748518—which is marked INVALID and apparently not going to be fixed—Firefox calculates the bottom padding of the footnote content differently from other browsers. The upshot is that, in any Littlefoot footnotes that are long enough to scroll, there is not enough padding below the content, and the last line of the content is partially obscured by the “fade out” gradient at the bottom of the footnote.

Another ticket for the same issue (demonstrated in Bigfoot) is webcompat/web-bugs#22740.

Screenshot

Here’s a screenshot of how the HTML below renders in Firefox 67.0.4 on macOS. The footnote is scrolled down as far as possible; as you can see, the last line is cut off.

Screenshot of the bug. The last line of the footnote is cut off.

Minimal example

<!DOCTYPE html>

<head>
    <title>Footnote test</title>
    <link rel="stylesheet" href="https://unpkg.com/littlefoot@2.0.2/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/littlefoot@2.0.2/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
    littlefoot.default()
</script>

</body>

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

No branches or pull requests
1 participant
@bdesham