Search code examples
cssfullpage.jsmix-blend-mode

Why does CSS Blend mode get overridden by fullPage.js, a jquery plugin?


CSS Blend mode is "deactivated" when used inside fullPage's default containers, section and slide.

Creator Alvaro Trigo instructed me to use option css3: false to solve the problem, but it only works with section and not with slide and besides, it makes page rolling animation quite choppy.

He also advised me that this is not a fullpage issue, but rather a css one.

Here is a codepen illustrating the issue:

https://codepen.io/zerino/pen/MXRvbb

And here is the topics in fullPage´s issue forum:

https://github.com/alvarotrigo/fullPage.js/issues/3288


Solution

  • Plugin is not the problem, you can delete all js from your example and blend mode still doesn't work.

    According to the spec:

    The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

    Blend mode interacts with element's direct parent only. You can test it by setting a background color for .intermediary like I did in this example.