ARTICLE AD BOX
I have two flex displayed divs on my site, each containing two child divs with a flex-direction set to row and a mix-blend-mode set to multiply, visible against an image background.
This works fine.
The second of these parent divs is a footer positioned as sticky.
Below a specific @media breaking point, here at 500px, the flex components have their flex-direction set to column.
Once the sticky footer element has the column direction set, the mix-blend-mode stops working, and the background becomes the simple opaque background-color.
The change can be seen by decreasing the size of the window of the code snippet below.
Why does this happen, and what can I do to fix this?
I'm not entirely certain the 'stickiness' has anything to do with it, but because that's the only real difference between the two parent divs, I'm pretty sure that must be the culprit.
The only somewhat relevant similar question found is mix-blend-mode with table cell that have position sticky, having to do with dimensions/positioning rather than mix-blend-mode, but nevertheless notably and possibly importantly points out that a sticky element changes states from 'relative' to 'static' once it reaches its threshold. In both these states mix-blend-mode should work, however. The change in state itself is also not causing it, since the blend mode will happily reactivate once the contents are displayed in a row (or my understanding is flawed, which is very likely).
