0

Have a look at this Sassmeister and let me know where the extra darker blue column to the far right comes from please. I don't believe this is a sub-pixel rounding issue but something else.

What really confuses me is that the extra bit shows up with 12, 13 and 14 columns selected, but not with 10, 15 or 16 columns, though 12 columns means it is a full number.

1200 / 10 = 120    
1200 / 12 = 100    
1200 / 13 = 92.30769230769231    
1200 / 14 = 85.71428571428571    
1200 / 15 = 80    
1200 / 16 = 75

So regardless of if the result is a full number or a fraction there is somewhat odd behavior of the debug image. I have also removed gutters to be sure it has nothing to do with those. The reason I believe this is not a sub-pixel rounding issue is that this extra bit varies in width when selecting different amounts of columns, best visible with 12 columns.

https://www.sassmeister.com/gist/39b8136d4dcc6b8acfd269f675c97af5

https://user-images.githubusercontent.com/5672418/31413567-2d80a8c0-ae1a-11e7-8a2a-94aed8ffbd08.png

edit
The extra bit is not visible in latest Firefox, only shows up in Chrome, anyone have a fix for Chrome to display the debug image correctly?

lowtechsun
  • 1,915
  • 5
  • 27
  • 55
  • 1
    It is the usual subpixel issue. Each column adds a potential 1px error, so changing the column count changes how far the final result is off. A single column will never be more than 1px off, 12 columns could show a final 12px error. I'm glad that Firefox has finally fixed that! – Miriam Suzanne Oct 12 '17 at 17:41

1 Answers1

1

This used to annoy me, just a chrome bug, debug img looks perfectly neat in FireFox.

Viewed in FireFox

Ben Mirkhah
  • 56
  • 4