Card and showcase layout issues after upgrading

[tvercaut]

Hi,

I just upgraded my wowchemy installation and have a few issues with the layout of portfolios. The cards now overlap. Is there something I need to take care of that I haven't done in the upgrade process?

Old, expected behavior:

New, problematic output:

Note that I also get issues with the Showcase layout. Compact seems fine.

Help would be appreciated.

Best wishes,
Tom

[chrede88]

What commit did you update to? I just tried updating my test repo to the latest commit 17505c4, and everything looks normal.

Maybe you have some custom scss that behaves differently with the updated theme?

[chrede88]

So I tried updating to 17505c4 on the main branch. Building the site locally gives me a very normal looking site (with some images missing).

[tvercaut]

Interesting. I saw you used safari but I use firefox by default. It indeed looks fine in safari but not in firefox...

[chrede88]

You're absolutely right! Tried both Firefox and Chrome. Firefox does indeed mess it up, Chrome is fine as well.

[chrede88]

I looked at the source in both Firefox and Safari. They're similar.

See the two highlighted <div>, bottom is the Firefox source, top is Safari.
Somehow the height allocated changes from ~1600px to ~1315px in Firefox, after upgrading to the latest commit.

[chrede88]

@gcushen any idea why this is happening in Firefox?

[StefanoCecere]

i checked the same problem (even on https://wowchemy.com/user-stories/ itself) just on Firefox (i have 87.0)
Chrome and Safari work well.. i'll report the problem to Mozilla.

maybe updating to Bootstrap 5.0 could fix the problem, since the Masonry (the dynamic grid layout system) could be updated

[fretchen]

Same problem here. Any suggestions on how to improve this ? It only happens with firefox but not sure what to do about that.

[FionaMacNeill]

I have tried everything I can think of in my local dev site and I am unable to resolve this issue. As noted it is specific to Firefox.

[tvercaut]

My "workaround" so far has been to stick to an older version of wochemy which is not great... More specifically I am sticking to v0.0.0-20210120025205-e0ae7c979cda

See also:
#2233

Anyway, I am looking forward to a fix as well.

[FionaMacNeill]

@tvercaut just to confirm - does this mean that everything needs needs to be the older version or could you for example use the old version partial layout for the Portfolio widget specifically? I am guessing only the former is an option. As I have done a bunch of customisations on the newest version of Wowcherry, reverting the whole thing would be a lot of work. Oh well.

[tvercaut]

@FionaMacNeill I haven't tried to pin the version of only the widget. I'm currently pinning the version of wowchemy. Again, I'm not saying this is a very good approach...

[louwerse]

I encounter the same issue. After refreshing the page, it loads normally. Does this have something to do with the lazy loading of images?

[sjgknight]

If it does, is that something that can be handled? (I'm now also getting this issue)

[gustybear]

Compact view is showing the same overlap issue with recent releases. It corrects itself once you click the tag.

[IPv777]

Did you find a solution ? I've the same problem ...
@gustybear @louwerse @fretchen @StefanoCecere @tvercaut @chrede88

[tvercaut]

I think this has been fixed with recent versions of wowchemy as I am not seeing that issue anymore (and stopped pinning to an old version). See e.g. https://wowchemy.com/creators/ which works fine with firefox

[FionaMacNeill]

It has been fixed. Thanks for letting me know.