Chart v3.0.0-rc.5 - Gridlines (Safari vs. Chrom) and Bubble Chart Resize padding

[zibous]

Expected Behavior

1. Grid lines are rendered differently in the Safari and Chrome / Firefox browser.
2. BUBBLE CHART - Resize Padding

Current Behavior

1. GRIDLINES

Grid lines are rendered differently in the Safari and Chrome / Firefox browser.
It looks good on mobile (Android Chrome, Vivalid, Firefox).

Am I doing something wrong or is this a bug in the Safari browser?

2. BUBBLE CHART
   

When I click on a legend, the display size becomes smaller (resize) and a free space is created on the right. When deselecting the legend, the size is retained. But only comes with certain sizes of e.g. canavas size: 354 x 320.
This effect does not occur with any of the other charts.

Possible Solution

Steps to Reproduce

Test case: http://www.ipscon.com/test/

Context

Environment

• Chart.js version: v3.0.0-rc.5

• Browser name and version: ✖︎ Safari Version 13.1.2 (13609.3.5.1.5), ✔︎ Vivaldi | 3.7.2218.45 (Stable channel) (x86_64), Chrome Version 89.0.4389.90 (Offizieller Build) (x86_64)

• Link to your project:

[kurkle]

The grid,can you try if alignToPixels scale option makes a difference?
https://www.chartjs.org/docs/master/axes/cartesian/index#common-options-to-all-axes

[zibous]

The grid,can you try if alignToPixels scale option makes a difference?

                  chart.defaults.scales.y = {
                        alignToPixels: false
                    }
                    this.ChartControl.defaults.scales.x = {
                        alignToPixels: true
                    }

Negativ, no effect.

[kurkle]

Not sure if that defaults is the Chart.js defaults, but if is, then its a map by scale type and not id.

[zibous]

Not sure if that defaults is the Chart.js defaults, but if is, then its a map by scale type and not id.

Without setting the color of the gridlines, everything is rendered correctly:

It only happens when I set the grid.color. If I don't do that, the GridLines will be rendered correctly.

                        chart.defaults.set("scale", {
                            grid: {
                                lineWidth: 0.1,
                                color: "f8f8f8"
                            }
                        })

[kurkle]

If you dont set the lineWidth with the color, any change?

[kurkle]

also the color is missing #

[zibous]

also the color is missing #
If you dont set the lineWidth with the color, any change?

[kurkle]

ok, good. so it is an alignment issue of thin lines < 1px

[zibous]

ok, good. so it is an alignment issue of thin lines < 1px

Yes, if i set the lineWidth >= 1px all is for safari o.k

[etimberg]

I gave this a test on my iPhone and the grid lines look consistent on Safari. It does look different than the Chrome screenshot, but at least all the lines in the same chart look consistent.

iPhone 12 mini, iOS 14.4.1

[zibous]

@etimberg
Yes same here on my Android Phone and Tablet.

But not on OSX Desktop Browser Safari Version 13.1.2 (13609.3.5.1.5).

If set the line width >= 1 px all is o.k

[etimberg]

Unfortunately, I don't have Safari 13 to test with myself. Do you know what the devicePixelRatio of your screen is?

[zibous]

@etimberg

if (window.devicePixelRatio) {
    alert('window.devicePixelRatio = ' + window.devicePixelRatio);
} else {
    alert ('window.devicePixelRatio not supported');
}

Result: window.devicePixelRatio = 1

[etimberg]

@zibous Is there any way you can try #8739 and see if it fixes the issue for you?

[zibous]

@etimberg
Thanks, now it looks better. 👍