Once you load the page, part of the content with a div with css blend mode (RED SQUARE CONTENT) doesn’t load or just doesn’t appear or even worst, it load with others cms images inside of the same div .
Hey @maximus I see that you’re using custom code for the blending. Did you see our new release yesterday of CSS filters which you can use in Webflow now without any custom code?
Hi @Waldo, how’s going?
Yeah I’ve saw it, it’s amazing! It’s really gonna help us
Unfortunately on this project I’m using Multiply!
So I’m still seeing this damn bug with css blend + webflow cms images.
Sneak peek here: http://kenwoodx-79d2c6.webflow.io/
Any idea?
Unfortunately I don’t have an answer to your original question, but on first glance I see a minor layout tweak that would improve your site on large desktop displays. To keep your grid layout from breaking apart on big screens, you can add a max-width attribute to gridhero and grid
max-width: 1790px;
margin left and right: auto; (to center content when the max-width limit is reached)
Hey @vlogic
Wow, thanks a lot for your tip! I definitely gonna apply it
There a long way here on this site and I’ve got a bit worried with this multiply bug. (I’ve found another bug here too… a tiny gap between some images Haha )
You may have already tried this, but here is a stab in the dark… Try a simple test. Make this single line change to your custom code, re-publish and see if it is indeed the multiply blend mode that is the issue with visibility.
.mbm-multiply{mix-blend-mode: normal;}
If the issue persists - it is something else. Worth a try?
Hi @maximus, could you you please try setting the Item class on the dynamic item, to have a z-index of 1, right now it is set to auto, and I think that might be a styling issue.
Hey @vlogic, thank you so much your tip.
I’ve did the test as you mentioned and the problem unfortunately persisted
But @cyberdave shared some magic here too!
It really works set the z-index to 1 on the dynamic list
Thanks a million!!!
Your both are <3
By the way, have you noticed that silly gap between blocks of image? Do you have any idea of how can I fix it?
They are actually “half pixel” due percentage of the grid.
Hi @maximus,
I have experienced the odd half pixel gaps with percentages on absolute aligned elements before (I think absolute alignment is likely the culprit, though I am not sure at all why??). It is really evident during viewport resizing. I am almost certain I was able to use relative positioning with offset -100% as an alternative for my particular layout. I also tried a div (mask) using overflow hidden with both elements inside, but it was a hack PITA x10. It may be worth a try to do a small test in isolation on a section or element and see what will give the best result.
Glad dave was able to you sort the visibility issue - he is an incredibly smart guy!
.
