Hi.
I’m not sure if the question is directly kirby related, but I found a strange behavior within the instant online demo displayed in chrome browser.
I wanted to achieve sth. similar to the instant online demo – portfolio example (Try | Kirby CMS – Instant Online Demo). It works fine in Safari, but when I open the example in Chrome the image grid on the right side is stacked strangely (see screenshots). When I reload the site it displays perfectly. When I resize the browser the strange stacking appears again. After reloading it displays in perfect order again.
Has anyone experienced the same with the Instant online demo or can reproduce the behavior?
Does anyone have an idea, how to fix it?
System: MacOS 12.3.1
Browser: Chrome Version 102.0.5005.61
Any help or ideas highly appreciated… Thanks!
That’s the corresponding code for the example found on GitHub:
Template:
<article>
<h1 class="intro"><?= $page->title()->escape() ?></h1>
<div class="grid">
<div class="column text" style="--columns: 4">
<?= $page->text()->kt() ?>
</div>
<div class="column" style="--columns: 8">
<ul class="portfolio-project-gallery">
<?php foreach ($page->images()->sortBy('sort') as $image) : ?>
<li>
<a href="<?= $image->url() ?>" data-lightbox>
<figure class="img" style="--w:<?= $image->width() ?>;--h:<?= $image->height() ?>">
<?= $image->resize(800) ?>
</figure>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
</article>
Css:
.grid {
--columns: 12;
--gutter: 3rem;
display: grid;
grid-gap: var(--gutter);
grid-template-columns: 1fr;
}
.grid > .column {
margin-bottom: var(--gutter);
}
.portfolio-project-gallery {
line-height: 0;
columns: 1;
column-gap: 1.5rem;
}
.portfolio-project-gallery li {
display: block;
margin-bottom: 1.5rem;
break-inside: avoid;
}
@media screen and (min-width: 60rem) {
.portfolio-project-gallery {
columns: 2;
}
}
strange behavior when loading page in chrome:
(looks perfect when refreshing the page.
Looks strange again when resizing…
looks perfect again on refresh…)
