Bricklayer starts with one column and than flashes/switches to two columns

Support Themes & Styling
1

Heyho,

in my case bricklayer.js first loads in one column and than switches into two columns mode - this leads to a short visible, annoying flash on the screen…especially when using chromium browsers not so with safari and firefox.

do you have any idea how to deal with this?

here is it showing quite clearly

http://rad-ab.org/

it seems to be because of the number of images that are loading on the page…caching solves the problem for further visits but still it flashes for the initial first visit

cheerio and thanks

andré

2

ok, i just checked it - the flashing first of a single column and than the proper appearance of two columns also happens at the quark demo installation…when the cache is cleared

https://demo.getgrav.org/blog-skeleton

3

@anderer, The content of items arranged by bricklayer.js or masonry.js have an impact on the process of laying out the items.

In case of a two-column layout, bricklayer adds items to the two columns. However it may happen that a certain item is wider then the allocated 50%. This could for example happen due to wide images or titles.

If an item forces the column to be wider then 50%, the flexbox will then automatically wrap the columns into a single column which occupies the full width. This may cause a flash…

Then the browser may resize elements due to css (eg. resizing images) which may turn the item smaller then 50%, leaving space for the second column. Flexbox now rearranges into two columns. And this may cause a flash…

To test this, you may try the following:

  • Resize the viewport until the media query sets the column width to 50% and only one column is being displayed.
  • Change the style of class .tool-name from 2rem to 1rem. The flexbox will now re-arrange into 2 columns.
  • Although two columns are displayed, the left column seems wider then the right column. Scroll down until you see an item with title ‘Sprachgewohnheiten Brecher’. This item has a inlined font-size of 1.7rem and cannot wrap. This forces the column to be wider then the right column.
  • Uncheck the setting of the font-size and both column will now be equally wide.

Solution:

  • Use properly sized images that fit the column size. Use ‘srcset’ an ‘sizes’ for this. This may also increase performance when smaller images are being loaded for 2 column layout.
  • Break long problematic words in smaller ones (which may sometimes be difficult for the German language…)
4

hey @anon76427325,

thanks for setting me on the right track and experimenting with it a bit.

The problem however is not caused by the size of the images - it is caused by the max-width of the cards-class - or the absence of a max-width.

I now defined a max-width of the cards-class depending on the screen size and there is no flashing. now other things come apparent e.g. the margin-top visibly pushing down the right column but that’s not as annoying as the full flashing with one column. and in the actual installation i will activate caching which will reduce it even further - see here which the not released new site: http://ting-d.org/

however the one column thing is also visible with the blog-site demo (if not cached) - so maybe sth can be done about it in the future, e.g. my approach with a max-width or something more sophisticated : )

thanks again!
and thanks everyone for grav - you are great!

andré

5

@anderer, You’re right, the images in your items are not the problem:

  • They appear to be svg…
  • And images resize to the width of the container…

The real issue is the size of the titles (.tool-name) of some items. These wide titles contain words that do not wrap which inhibit the items to shrink.

I don’t think setting the max-width for the card is the way to go. It causes issues for widths between media-query breakpoints. And isn’t a solution on mobile if word is wider then device.

Try the following to force the wide titles to break within words when necessary:

.tool-name a {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}