This issue is fixed in
X3 release [0.19].
Thanks to @sHagen for identifying the bug in this post. Feel free to test the justified layout in the new demo!
Bug Overview
I would like to note the technical reasons for why this bug could occur: As you may know, X3 is a Html5/ajax application, which loads and "injects" content when navigating from the menu.
- You are using a windows browser with scrollbars that appear/disappear based on necessity.
- You navigate from a page without scrollbar to a page with justified-layout.
- X3 injects the content into page, and scrollbar is added after the justified layout is rendered.
- Since appearance of the new scrollbar affects the available layout width, this then corrupts the justified layout.
Furthermore, I would like to note the following:
- The bug would not occur on neither mobile/touchscreen or Mac's. Why? Because these devices employ a zero-width scrollbar that appears on-demand, and "overlays" the window instead of affecting the width.
- The bug would not occur when loading the page directly (or refreshing the page), because the scrollbar will already be there (if required) before the justified layout renders.
- The bug would only occur when navigating from a page without scrollbar to a justified-layout page with scrollbar. The only reason why the bug occurs in the first place, is because the layout container changes width once scrollbar is added. If you navigated from a page that already had a scrollbar, there would be no change in layout-width which would corrupt the justified-layout.
- The bug would only occur when using the "wide" gallery layout, because this is the only layout where the width would get affected when scrollbar gets added.
Fix
To fix this bug, we run a timer function
after the justified layout is rendered, to check if the width of the gallery module changes. If the width changes, it means a scrollbar must have been injected. :kissing_heart: