responsive-grid-of-hexagons icon indicating copy to clipboard operation
responsive-grid-of-hexagons copied to clipboard

The "curtains" of the hexagons do not always close perfectly

Open costincca opened this issue 4 years ago • 7 comments

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. image

But at some widths, they can also overlap. image

Did you encounter this? How can I possibly fix it?

Thank you, Costin

costincca avatar Aug 10 '20 16:08 costincca

@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.

poi33 avatar Aug 11 '20 07:08 poi33

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.

costincca avatar Aug 11 '20 08:08 costincca

@web-tiki is there some calculation we can increase the precision on to avoid this?

poi33 avatar Nov 26 '20 13:11 poi33

@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.

web-tiki avatar Nov 27 '20 10:11 web-tiki

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

hiral14 avatar Apr 21 '21 13:04 hiral14

i would like to work on this issue please assign to me

Dhruvbagadiya avatar Sep 24 '22 10:09 Dhruvbagadiya

i would like to work on this issue please assign to me

Done !

web-tiki avatar Sep 26 '22 09:09 web-tiki