responsive-grid-of-hexagons
responsive-grid-of-hexagons copied to clipboard
The "curtains" of the hexagons do not always close perfectly
Hi,
I encountered an issue from the very beginning. Depending on the size of hexagons, the top and bottom curtains that close in the middle do NOT close perfectly.
Now, there is a gap.
But at some widths, they can also overlap.
Did you encounter this? How can I possibly fix it?
Thank you, Costin
@web-tiki i remember this happening before some times. Its a floating point rounding issue with some sizes. @costincca if i remember correctly this happend in only specific browsers, and it is a single pixel. You can try to tweak the math with higher precision, or you can try to blur the curtain element to make the 1 pixel difference less visible. I would also advice to have a little room for error, especially when its a single pixel line that shows up some of the time.
Hi @poi33 I do not understand yet how the curtains are calculated. I need to use a Dev Web Tools from Chrome or Mozilla to check the elements. I started to explore the possibility to freeze the hexagons at a certain size (where the curtains look well) and change only their number per line. Or calculate the top curtain as 50% and the bottom curtain at "bottom - size of the top one", thus having just one round operation and the second one filling in the remaining of space.
@web-tiki is there some calculation we can increase the precision on to avoid this?
@poi33 I don't have time to make a fix for this bug just now but the tests I made reveal the calculation bug comes from the transform
property on the h1
and p
element in the hexagons.
Hi @poi33 I do not understand yet how the curtains are calculated. I need to use a Dev Web Tools from Chrome or Mozilla to check the elements. I started to explore the possibility to freeze the hexagons at a certain size (where the curtains look well) and change only their number per line. Or calculate the top curtain as 50% and the bottom curtain at "bottom - size of the top one", thus having just one round operation and the second one filling in the remaining of space.
Hi, have you figured out now how do the curtains close properly, I imported bootstrap and and curtains can't shut, there's big gap in between
i would like to work on this issue please assign to me
i would like to work on this issue please assign to me
Done !