Как заставить режим смешивания применяться только к тени липкого элемента? ⇐ CSS

[Anonymous]

У меня есть пользовательский интерфейс, в котором есть элементы с позицией: липкий;. У них есть тени блоков, поэтому они выглядят так, будто плывут над текстом под ними. Я хочу применить режим наложения к теням блока, и это вызывает у меня некоторые проблемы.
Что я хочу, так это сделать так, чтобы тени никогда не получались темнее, когда они перекрываются. В настоящее время в легких патологических случаях липкие элементы могут наслаиваться друг на друга, а накладывающиеся тени становятся непривлекательно темными; Я бы хотел это исправить. (Я также пытаюсь смягчить эти патологические случаи, но мне все равно хочется исправить тени.)
Я могу заставить тени выглядеть так, как я хочу, используя режим смешивания-наложения: затемнить;, но это не очень хорошо сочетается с положением: липким;.
Вот JSBin нескольких вещей, которые я пробовал. Каждый из шести примеров содержит идентичную разметку; только CSS другой. Извините за болезненно бирюзовый фон — так проблему легче выявить.

• "badshadow" имеет тени такими, какие они сейчас есть в моем пользовательском интерфейсе. Если вы прокрутите контейнер вниз, вы увидите, как элементы накапливаются, а тень становится неприятно темной. Это не конец света, и я буду жить, если это никогда не будет исправлено, но я думаю, что могло быть и лучше.
• "goodshadow "имеет тени такими, какими я хочу, чтобы они выглядели. Использование режима смешивания-наложения: darken на ::before, а также непрозрачного цвета тени, кажется, делает довольно хорошую работу, делая тени «максимальными» при желаемой темноте (они конечно, слишком сильны для демонстрационных целей, но суть вы поняли). Но мне пришлось установить позицию: Absolute;, чтобы это выглядело правильно.
• "sticky" - это то же самое, что "goodshadow" за исключением того, что мои элементы — это позиция: липкий;, и это то, что я хочу. Но это отменяет мой режим наложения, поэтому мои тени теперь непрозрачны и полностью скрывают затененный контент, что нехорошо.
• Следующий контейнер — это еще одна «хорошая тень», которая предназначена только для того, чтобы продемонстрировать, что Safari — это дурацкая штука. Попробуйте это в Safari, чтобы почесать голову. Поведение второй «goodshadow» меняется при изменении размера липкого контейнера. Очень странно, но это не главная проблема. Идем дальше:
• "isolated" идентично "goodshadow", за исключением изоляции: isolate; для абсолютно позиционированных элементов . Теперь они смешиваются, как липкий, поэтому это подтверждает для меня, что (одна из) проблем заключается в том, что позиция: липкий; создает новый контекст стекирования (для каждого MDN).
• nobefore имеет фиксированное позиционирование, и мои тени работают так, как я хочу, но потому что я больше не использую ::before для ограничьте мой режим смешивания-наложения: затемнение только тенями блока, содержимое моего элемента также смешивается с затемнением, что тоже нехорошо.
• И в «двойном наложении» у меня также работают тени, с ::before, но только потому, что я напрямую применил режим смешивания-наложения: затемните липкий элемент, который имеет ту же проблему, что и «nobefore».

Моя интерпретация такова Дело в том, что липкие элементы, имеющие свой собственный контекст наложения, означают, что вместо смешивания тени с тем, что находится позади, тень смешивается с элементом, а затем элемент + тень смешивается с тем, что находится позади, что нарушает мой режим смешивания-наложения: darken; только для тени, поскольку этот режим смешивания-наложения: darken; применяется к слиянию тени с элементом, а не к тени с фоном.
Думаю, я понимаю проблему, но не вижу хороших решений. Полагаю, я мог бы удвоить все липкие элементы: один с тенью и режимом смешивания: затемнение, а затем один перед ним без тени и режимом смешивания: нормальный, но… есть ли лучший способ?

Подробнее здесь: https://stackoverflow.com/questions/790 ... ky-element