Pdfmake: 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,
      },
    },
  ],
};