Table bug: phantom borders on "noBorders" table

[BirdInTheCity]

When setting a table to "noBorders" and giving it a background fill color, there is a slight white gap between cells when the PDF is generated.

Playground test example:

var dd = {
    content: [
        {
            style: 'tableExample',
            layout: 'noBorders',
            table: {
                body: [
                    ['Column 1', 'Column 2', 'Column 3'],
                    ['One value goes here', 'Another one here', 'OK?']
                ]
            }
        }
    ],
    styles: {

        tableExample: {
            margin: [0, 5, 0, 15],
            fillColor: "#2D4D81",
            color: "#ffffff"
        }
    }
}

Chrome screenshot: Looks good The generated PDF looks good in Chrome:

OSX Preview screenshot: Looks bad The generated PDF has phantom borders when viewed on iOS and in OSX Preview app. You can see slight white borders around the cells:

[BirdInTheCity]

On a related note, I also tried matching the border color to the background color, and that also didn't work. It produced similar artifacts:

[liborm85]

I do not have a Mac so I have no way to test it...

[trueter]

Any chance we can bump this?

[BirdInTheCity]

In an effort to get this issue resolved, I posted a $15 bounty for it: https://www.bountysource.com/issues/47733322-table-bug-phantom-borders-on-noborders-table

[BirdInTheCity]

@liborm85 I'm still trying to get this issue resolved, as it's making my pdf invoices look bad on iPhones/iPads/Macs. I'd like to dive deeper into the codebase and see if I can resolve it myself. Do you have any guesses as to where these draw calls are occurring?

With a little guidance, maybe I can fix? 0:)

[BirdInTheCity]

This is how the PDF invoice looks. :(

[BirdInTheCity]

It seems that it may just be a math error, where the cells are adding 1px or .5px padding.

I was able to "hide" the horizontal pixel by setting a 1px border, with the same border color as the background cell. However, the hack did not work for the vertical lines.

var dd = {

    content: [
        {
            style: 'tableExample',
            layout: 'noBorders',
            table: {
                body: [
                    ['Cell 1', 'Cell 2', 'Cell 3'],
                    ['Cell 4', 'Cell 5', 'Cell 6']
                ]
            },
            layout: {
                hLineWidth: function (i, node) {
                    return 1;
                },
                vLineWidth: function (i, node) {
                    return (i === 0 || i === node.table.widths.length) ? 0 : 40;
                },
                hLineColor: function (i, node) {
                    return '#2D4D81';
                },
                vLineColor: function (i, node) {
                    return '#2D4D81';
                },
            }
        }
    ],
    styles: {

        tableExample: {
            fillColor: "#2D4D81",
            color: "#ffffff"
        }
    }
}

[Radiergummi]

@BirdInTheCity your example seems to have a mistake - the layout property is duplicated. I'm stuck on a remotely similar issue - I'd like to reduce the headerLineOnly line width to 1px, but can't find a way to do so. Any idea how to go about that?

EDIT: Nevermind, found it:

layout: {
  hLineWidth: function ( i, node ) {
    return i === 1 ? 0.5 : 0;
  },
  vLineWidth: function ( i, node ) {
    return 0;
  }
}

[BirdInTheCity]

@Radiergummi You're correct, there should be only one layout parameter. Though even with one, the error persists. BUT...

I found a hack to hide the vertical lines: I set the vLineWidth: -.01 See below:

var dd = {

    content: [
        {
            style: 'tableExample',
            table: {
                body: [
                    ['Cell 1', 'Cell 2', 'Cell 3'],
                    ['Cell 4', 'Cell 5', 'Cell 6']
                ]
            },
            layout: {
                hLineWidth: function (i, node) {
                    return 1;
                },
                vLineWidth: function (i, node) {
                    return -.01;
                },
                hLineColor: function (i, node) {
                    return '#2D4D81';
                },
                vLineColor: function (i, node) {
                    return '#2D4D81';
                },
            }
        }
    ],
    styles: {

        tableExample: {
            fillColor: "#2D4D81",
            color: "#ffffff"
        }
    }
}

I'm guessing there's some math error in the table code. It's too complex for me to diagnose, but at least this masks it.

[liborm85]

Problem is identified. Adobe Acrobat rendered correctly. Google Chrome rendered correctly. Mozilla PDF.js rendered incorrectly. This viewer contains render bug.

(source: https://github.com/bpampuch/pdfmake/pull/1631)

[BirdInTheCity]

@liborm85 Confirmed that the #1631 fix works! Please merge! YAY!

[perbergland]

Still reproducable when viewed with system PDF renderer on macos

[perbergland]

Playground:

// playground requires you to assign document definition to a variable called dd

var dd = {
  content: [
    {
      table: {
        body: [
          [{ text: "First paragraph",  color: "white" }],
          [
            {
              text:
                "Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines",
               color: "white",
            },
          ],
        ],
      },
      fillColor: "black",
      layout: {
        hLineWidth: () => 0,
        vLineWidth: () => 0,
      },
    },
  ],
};

[modus-jose]

Any chance this will get merged, getting the same issue. Any support I can provide to get it out? @BirdInTheCity or @liborm85

[modus-jose]

@perbergland , @BirdInTheCity I've tested this with 0.2.10 which uses jskit 0.14.0 Which is the fix in the PR. It will help if you can confirm this is fixed on your side.

In my case the fix was to use 1px wide vertical lines with the same coloras the background in my layout. And substracting two from the first cell to get the actual width to match an element with the same fixed width on top