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

Repeated gradient backgrounds are misaligned #790

Closed
aahancoc opened this issue Feb 5, 2019 · 2 comments
Closed

Repeated gradient backgrounds are misaligned #790

aahancoc opened this issue Feb 5, 2019 · 2 comments
Labels
bug Existing features not working as expected
Milestone
53.0

Comments

@aahancoc
Copy link

aahancoc commented Feb 5, 2019

I'm having problems with repeated gradients not quite lining up with their parent containers.

For instance, if I have a 144pt tall div, and I want a linear gradient (set to bottom) gradient to repeat 10 times, I'd set background-size to 100% 14.4pt. This should create 10 perfectly spaced lines, starting from the top of the container. However, when Weasyprint renders it the spaces are just too large, causing it to look misaligned.

However, if I had a 150pt tall div and I used 15pt at the spacing, it works perfectly. Ditto with 125pt and 12.5pt spacing. However, 2in and 0.2in fails just like 144pt and 14.4pt. It appears that the background size is being rounded to some fraction of a point, which builds up and causes misalignments.

I'm running on Windows 10 using Python 3.6 and Weasyprint 44.

Here's the test case file:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            border: 0.1in solid black;
            background: linear-gradient(to bottom, red, red 0.02in, white 0.02in, white);
            margin: 0.1in;
        }
        .ex1 {width: 144pt; height: 144pt; background-size: 100% 14.4pt;}
        .ex2 {width: 150pt; height: 150pt; background-size: 100% 15pt;}
        .ex3 {width: 125pt; height: 125pt; background-size: 100% 12.5pt;}
        .ex4 {width: 2in; height: 2in; background-size: 100% 0.2in;}
    </style>
</head>
<body>
    <div class="ex1"> <!-- empty --> </div>
    <div class="ex2"> <!-- empty --> </div>
    <div class="ex3"> <!-- empty --> </div>
    <div class="ex4"> <!-- empty --> </div>
</body>
</html>

And here's the output.
@liZe liZe added the bug Existing features not working as expected label Mar 1, 2019
@liZe
Copy link
Member

liZe commented Mar 1, 2019

It's because we use patterns and don't repeat images and gradients manually.

I first thought that it was because we use a PDFSurface to draw our patterns, and that PDFSurfaces have a size rounded to points. But the problem happens with a RecordingSurface too, so…

We can manually repeat images. I've tested and it works, it's not perfect (we still have small rounding problems, maybe caused by the PDF reader) but it's much better.

That would also fix #238.

@liZe
Copy link
Member

liZe commented Aug 1, 2021

This problem is fixed with version 53.0.

@liZe liZe closed this as completed Aug 1, 2021
@liZe liZe added this to the 53.0 milestone Aug 1, 2021
@liZe liZe mentioned this issue Apr 5, 2022
Closed
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
53.0
Development

No branches or pull requests
2 participants
@liZe @aahancoc