Are the lines created by the rectangle shape's outline?
This would mean that the rectangles and their outlines are competing for pixels as they shrink.
"Keeping to integers" can be tough when scaling. To be exact, you'd need to always scale the view by half/double and then round to similar (when a view is scaled up to double so that everything is half-sized, you need to round to double values.
e.g. if you are drawing at (1, 1) and scale the view so that that point would be (0.5, 0.5), you need to draw at (2, 2) instead so that the point would be (1, 1).
Moving to a vertex array is almost always the answer ;D
It's the ability to display multiple quads/triangles at once so much fewer draw calls for multiple rectangle shapes.
Of course, a tile map is just a vertex array at heart but designed to draw tiles.
My point was that even by only scaling double and half, keeping to integers still brings complications.
Scaling by anything else can be even more complications.
The consideration really is if you can put up with slight gaps. If not, you'll need a technique to reduce it:
Not scaling is one.
"Over-drawing" is another: drawing the tiles bigger than they should be so that they overlap.
Drawing at an integer-perfect state on a render texture and then drawing the render texture with modifications that would normally cause the gaps (there can be no gaps because it's already been rendered without them on the render texture).
This is a bit of work and can still be an issue when scaling if not handled carefully.
Using larger tiles can reduce issues too; Less likely to have gaps if there aren't tiles. Building a map of full pieces can a reliable way but removes the convenience of repeatable tiles.
Moving to a vertex array is almost always the answer ;D
It's the ability to display multiple quads/triangles at once so much fewer draw calls for multiple rectangle shapes.
Of course, a tile map is just a vertex array at heart but designed to draw tiles.
My point was that even by only scaling double and half, keeping to integers still brings complications.
Scaling by anything else can be even more complications.
The consideration really is if you can put up with slight gaps. If not, you'll need a technique to reduce it:
Not scaling is one.
"Over-drawing" is another: drawing the tiles bigger than they should be so that they overlap.
Drawing at an integer-perfect state on a render texture and then drawing the render texture with modifications that would normally cause the gaps (there can be no gaps because it's already been rendered without them on the render texture).
This is a bit of work and can still be an issue when scaling if not handled carefully.
Using larger tiles can reduce issues too; Less likely to have gaps if there aren't tiles. Building a map of full pieces can a reliable way but removes the convenience of repeatable tiles.
A vertex array allows you to draw many triangles at once rather than a couple (or so) at a time (like for a rectangle shape) so improves performance. It doesn't, however, change the way those triangles are calculated so vertex arrays don't automatically solve floating point ambiguities.
You would still need to apply a method (one or more I mentioned above or maybe something else you can find or think of!) to overcome those issues.
Good to hear that your problem has been fixed. :)
Not sure if it's "fixed" as such though. If you're drawing lines, they will always be there and never flicker. The quads are being "hidden" by those lines and 'may' be exposed on other occasions where the lines are on the edge of a pixel.
I'm not sure I under what you mean by drawing the quads because you want them to be clickable. You can, of course, just test the rectangle area for mouse positions. And, if you mean that you need it to display something when it's clicked (or hovered over), you can simply draw those cells that need to have something. This means you can not draw the others. You can do this by resizing the vertex array after calculating how many cells will be displayed and then just adding those ones.
Since your grid is so strict and even, it should be simple enough to calculate if one of those is outside of the window. Indeed, you can use rectangle collision to check this (SFML's FloatRects can do this; it's called intersects (https://www.sfml-dev.org/documentation/2.6.1/classsf_1_1Rect.php#ac77531698f39203e4bbe023097bb6a13)). Check the cell's rectangle against the window's rectangle (actually the view's rectangle).
Then, combining with the things I mentioned in the previous paragraph, you can only draw to the cells in range (by resizing and only adding the ones that are in range).
As an aside, if you would like to use a tile map that can do this automatically, you could try:
https://github.com/Hapaxia/CheeseMap/wiki
(https://en.sfml-dev.org/forums/index.php?topic=29172.0)
You could use Cheese Map to display your map and then draw the lines around it.
It automatically "culls" cells outside of the view. You can also have de-activated cells that aren't displayed if you'd like.