Streaming live at 10am (PST)

CSS BlendMode + CMS = Bug


#1

Hey guys!

I'm trying to use css blend mode with your CMS but something it not working properly.
Could you please take a look if I'm doing something wrong:

https://preview.webflow.com/preview/kenwoodx-79d2c6?preview=e728670336a3feefce5b5034f3c2112b

http://kenwoodx-79d2c6.webflow.io/

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 :worried: .

But if you put your cursor over it, it appears...

Someone can help me please?
Thanks :slightly_smiling:


#2

Can you provide some information on your browser and version as well as operating system? Thanks! :wink:


#3

Sure!

OS X Version 10.11.2
Google Chrome Version 50.0.2661.94 (64-bit)

Thanks :slightly_smiling:


#4

Hi @VladimirVitaliyevich

Sorry to ask again, but have you find out what's going on with this bug?
Tks


#5

I think @cyberdave may be able to help in resolving this bug. He is the expert. :wink::+1:


#6

Tks @VladimirVitaliyevich!
He've already talked with with me :wink:


#7

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? :smiley:

https://webflow.com/blog/new-feature-css-filters

Can't wait to see what you build! Lovely job on that masonry layout!


#8

Hi @Waldo, how's going?
Yeah I've saw it, it's amazing! It's really gonna help us :wink:

Unfortunately on this project I'm using Multiply! :confused:
So I'm still seeing this damn bug with css blend + webflow cms images.
Sneak peek here: http://kenwoodx-79d2c6.webflow.io/
Any idea?

Cheers!!!
(Thanks \o/ )


#9

Hi @maximus,

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)

Beautiful site!


#10

Hey @vlogic
Wow, thanks a lot for your tip! I definitely gonna apply it :slightly_smiling:

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 :confused: Haha )

Cheers


#11

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?


#12

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.

That is to address the invisible red panels in the dynamic item. Once that is working, we can check if the images are showing up as intended.


#13

Hey @vlogic, thank you so much your tip.
I've did the test as you mentioned and the problem unfortunately persisted :confused:

But @cyberdave shared some magic here too!
It really works set the z-index to 1 on the dynamic list :slightly_smiling:
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.

Thanks again guys :slightly_smiling:


#14

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!


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.