search

web-tiki / responsive-grid-of-hexagons

CSS responsive grid of hexagons
Apache License 2.0
570 stars 262 forks source link

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

Open costincca opened 3 years ago

costincca commented 3 years ago

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

poi33 commented 3 years ago

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

costincca commented 3 years ago

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.

poi33 commented 3 years ago

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

web-tiki commented 3 years ago

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

hiral14 commented 3 years ago

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

Dhruvbagadiya commented 1 year ago

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

web-tiki commented 1 year ago

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

Done !