Micro Lines Visible Between PNG Tiles in OpenSeadragon Viewer

[petdud]

I generate tiles using this command:
vips dzsave large_combined.png final --suffix .png --overlap 2

The image is pretty big with transparent background. When I display it using openseadragon 4.1.0, there are micro lines visible between the tiles as below:

When I use suffix .jpg, it works fine.

Here is example: https://cryptoarte.gallery - you can see micro lines on the image.

What can I do to fix it? I support themes in my front-end so the PNG makes my life so much easier but people complain on the lines so I really need to find a solution.

Tysm for help 🙏

[pearcetm]

This is exactly the same issue being discussed in #2514 - see that thread for options on how to fix this.

[petdud]

@pearcetm thank you, can you help me to understand what does it mean to build from master? I am using the latest version and defining it like this:

OpenSeadragon({
    id: OPENSEA_DRAGON_ID,
    showFullPageControl: true, // disable full screen view
    tileSources: src,
    homeButton: 'zoom-reset', // ID of icon
    zoomInButton: 'zoom-in', // ID of icon
    zoomOutButton: 'zoom-out', // ID of icon
    fullPageButton: 'full-page', // ID of icon
    zoomPerClick: 20,
    zoomPerScroll: 2,
  });

I also don't see the option to set the discussed subPixelRoundingForTransparency or the drawer. Do I also understand that there will be an upcoming new version that will fix the issue?

[pearcetm]

If your PNGs don't actually have transparency, it might be best to use the workaround suggested in the other thread:

viewer.addHandler('open',()=> viewer.world.getItemAt(0).source.hasTransparency = ()=>false )

Yes, this issue will be fixed in an upcoming release, but it may take a while for that to happen.

[bdrichards]

@petdud, the line of code suggested by @pearcetm over at #2514 is the temporary workaround that solves this issue for me (we have similar situation with PNG-based tilesets).
I added the suggested line of code immediately after the OpenSeadragon assignment:

viewer = OpenSeadragon({...});
viewer.addHandler('open',()=> viewer.world.getItemAt(0).source.hasTransparency = ()=>false );

[petdud]

The workaround works awesome, thank you @pearcetm & @bdrichards!! 🙏 just curious is there any side effect if my png has transparency? So far I could see some blurishness during zooms but not sure if this is because of the hasTransparency or not)

[pearcetm]

just curious is there any side effect if my png has transparency?

If your png has partial transparency, you may notice tile borders showing up where adjacent semi-transparent tiles overlap, because the overlapping regions will be drawn twice. There would be potentially bigger problems if you have multiple images open at the same time and they overlap each other.

[BeebBenjamin]

I used the config setting subPixelRoundingForTransparency: 2 to get around this in my Mirador viewer implementation (which uses OSD), it removed the white lines.