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

Absolutely positioned element at the bottom without fixed height disappears below page #1626

Closed
LukasKlement opened this issue Apr 22, 2022 · 6 comments
Closed

Absolutely positioned element at the bottom without fixed height disappears below page #1626

LukasKlement opened this issue Apr 22, 2022 · 6 comments
Labels
bug Existing features not working as expected
Milestone
55.0

Comments

@LukasKlement
Copy link

LukasKlement commented Apr 22, 2022 •
edited
Loading

I spotted a bug with the new beta version regarding the position of absolutely positioned elements at the end of a page. The bug only occurs, when the element has a height of auto.

WeasyPrint Version: 55.0b1

Code to reproduce:

<html>
<head>
<style>
    @page {
      size: 210mm 297mm;
      margin: 0;
    }
    html, body {
      margin: 0;
    }
    .bottom {
      background: yellow;
      bottom: 5mm;
      left: 0;
      position: absolute;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="content">
    Test
    <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis libero pharetra, feugiat arcu et, condimentum turpis. Aenean faucibus bibendum sapien in venenatis. Sed quis magna vitae elit commodo condimentum ac ac dui. Aliquam a venenatis velit. Etiam vitae dolor id nulla aliquet cursus eu ut sem. Mauris mollis tincidunt viverra. Phasellus mattis lectus a neque tempor, non scelerisque augue tincidunt. Curabitur elementum quam dignissim nulla mattis vestibulum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae nisl turpis.
    </div>
  </div>
</body>
</html>

Expected behaviour (working as of v54.3): The yellow box is displayed completely at the bottom of the page, screenshot: https://share.getcloudapp.com/7KuQZlxJ
Actual behaviour (v55.0b1): The yellow box is cut off and disappears into the void, screenshot: https://share.getcloudapp.com/2Nuz8ekB
@liZe liZe added the bug Existing features not working as expected label Apr 25, 2022
@liZe liZe added this to the 55.0 milestone Apr 25, 2022
@liZe liZe closed this as completed in 3ad6982 Apr 25, 2022
@liZe
Copy link
Member

liZe commented Apr 25, 2022

Hi!

First of all, thanks a lot for testing 55.0b1 and for reporting this bug.

The bug is now fixed and tested, your example works correctly. Don’t hesitate to report other bugs you may encounter!

@GitRon
Copy link

GitRon commented Dec 14, 2022

Hi @liZe! I am using the current version v57.1 and I still experience the same issue with a fixed footer.

#footer {
  height: 3cm;
  bottom: -4cm;
  left: 0;
  position: fixed;
  width: 100%;
  font-size: 8px;
}

Every page looks good except the last one (or the first, if there is only one. There, only the first line of content is shown, the rest ist hidden. I "debugged" it a little with coloring the elements and the element has the correct height so there is no hidden overlay etc.

Any ideas what I can do about it?

Thx ❤️
Ronny

@liZe
Copy link
Member

liZe commented Dec 16, 2022

I am using the current version v57.1 and I still experience the same issue with a fixed footer.

It’s not a bug, it’s a feature 😁️: absolutely positioned elements are now split between pages.

If you want to avoid this, you can use transform (that changes where the element is drawn) instead of bottom (that changes the real position on the page layout):

#footer {
  bottom: 0;
  transform: translate(0, -4cm);
}

@GitRon
Copy link

GitRon commented Dec 19, 2022 •
edited
Loading

Hi @liZe - Why is it a feature that the footer looks good on every page except the last one? 😆 I mean, it's literaly being cut of in the middle. It looks very much like a rendering problem 😅

Nevertheless, thx for the fix! I actually built a fancy workaround (which I cannot show anybody 🙈 ) so I found my way around it...with creating one page more and cutting it off with PyPDF2.

@liZe
Copy link
Member

liZe commented Dec 19, 2022

Why is it a feature that the footer looks good on every page except the last one? I mean, it's literaly being cut of in the middle. It looks very much like a rendering problem

That would be long to explain, but you can read the specifications if you’re really interested 😁️. Splitting absolute elements between pages displays the end of the element on the next page. On the last page, there’s no next page (because only the elements of the flow can create new pages), so the block is cut and the end is never displayed.

You can try to put an absolute element at the bottom of a page and display it on a browser, it will be cut too.

@GitRon
Copy link

GitRon commented Jan 9, 2023

Ok, thx for the explanation! Never knew about that!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
55.0
Development

No branches or pull requests
3 participants
@liZe @GitRon @LukasKlement