Partial fix ACP statistics

[Lukas W.]

Affected version

2.0.0 Beta 6

My ACP statistics look kind of weird:

Spoiler

The dates are just randomly hanging around there, they're not even at the right lines it appears.

Spoiler

 

[Chris D]

Browser/OS version?

 

[Lukas W.]

Google Chrome Version 62.0.3202.62 (Official Build) (64-bit)
Microsoft Windows 10 Version 10.0.15063

Seems to work as it should in Firefox 56.0.1 (64-Bit)

 

[Jumuro]

I think it's a similar situation
https://xenforo.com/community/threads/displaying-the-statistics-table-in-the-admin-panel.134064/

 

[Lukas W.]

Nope, no zoom and standard font size and family.

 

[Chris D]

I'm sorry @Jumuro I may have been slightly hasty when I closed down the previous report.

Although I still believe that this is due to some sort of display manipulation (I can only reproduce it if I zoom in above 100%) I think the exact cause is some additional styling that we've added.

 

[Lukas W.]

@Chris_D I found out the cause. My laptop is running a resolution of 3200 x 1800, which is obviously heavily overscaled, but setting it to something lower than that will render the image quality unusable. To accomodate for that, I'm running on a 175% scale and layout setting in the windows display settings. Windows actually recommends me 250%, but then everything looks like I'd be on a 15.6" cellphone rather than a laptop. Turning it down to 100% is unfortunately not an option, as this will render the font size so small, that normal text is no longer readable.

It might be worth noting that this error is chrome only though, it looks fine in Internet Explorer and Firefox, and Edge is... displaying the mobile design... so it's hidden there anyway.

 

[Chris D]

That's fine, I'm fairly sure we can improve this.

 

[Lukas W.]

It might not be a feasible solution for all platforms, but maybe a good start:

Removing the transform & -webkit-transform property from .ct-chart .ct-label.ct-horizontal.ct-end fixes the issue in chrome. It also seems to scale up the text a little, for whatever reason... (https://my.mixtape.moe/fergtr.mp4)

 

[Chris D]

Indeed:

I think the exact cause is some additional styling that we've added.

Thing is that has a purpose so we need to establish what else can work there.

 

[Mike]

Ultimately, this is a browser issue. There are a bunch of open Chrome bugs relating to this:

https://bugs.chromium.org/p/chromium/issues/detail?id=655983
https://bugs.chromium.org/p/chromium/issues/detail?id=510819

However, one did give a partial workaround. Applying -webkit-backface-visibility: hidden; to the SVG makes it so the labels maintain the correct position though they don't get zoomed. That's really the best that I think we can hope for at this point (while still having the labels along the X axis aligned reasonably).