Safari 和其他浏览器之间的混合模式不同

Question

我想这个问题没有解决方案，但我想问你。 我正在使用 Tailwind 和混合模式，但仅在 Safari 浏览器中得到不同的结果。 它看起来像 Safari 与底层元素融合，但它不与主容器背景融合。

我在下面附上代码和图片以便更好地理解。

我的 HTML 代码与顺风混合

<!-- main element has radial gradient, I thought it is issue, but it behave same with plain color

.ravn_main_gradient{
    background: radial-gradient(62.14% 122.16% at 49.03% 44.32%, rgba(33, 56, 63, 0.95) 0%, #1B2325 100%);

} -->

<main class="block w-full h-full bg-no-repeat bg-center bg-cover overflow-hidden relative mt-0 ravn_main_gradient">

<div class="card flex flex-col min-w-[365px]">
    <div class="_first max-w-[200px] max-h-[180px] bg-[#1F4952] overflow-hidden">
       <img class="w-full opacity-50 mix-blend-hard-light" src="{% static 'img/dc_shoe.png' %}">
    </div>
    <div class="_middle half_bg h-[calc(180px+5rem)] relative">

        <!-- number use mix blend overlay -->
        <p class="_number absolute -bottom-7 left-[calc(200px-1.8rem)] text-white text-6xl font-secondary font-bold tracking-negative mix-blend-overlay">02</p>
        
        <div class="font-secondary text-white pl-7 pt-7 pr-8">
            <!-- main title use blend exclusion -->
            <h3 class="text-2xl font-bold mb-5 mix-blend-exclusion">3D/AR Viewer of sneakers</h3>
            <p class="opacity-80 mb-1 font-light">Lorem ipsum dolor sit amet.</p> 
            <p class="opacity-80 mb-1 font-light">Fusce dui leo, imperdiet in, aliquam sit amet.</p>
            <p class="opacity-80 mb-1 font-light">Aliquam in lorem sit amet leo accumsan lacinia.</p>
        </div>

        
    </div>
</div>

</main>

有什么办法可以解决这个问题吗？ 我找不到任何东西，我怀疑有任何东西。 谢谢你。

Answer 1

好的，感谢@JHeth，我知道问题出在哪里。 其他人可能很熟悉，但我不知道。 我的设计就像这个<main>容器被拉伸成<body>的全宽和全高。 所以<body>和<main>在滚动时不会移动。 我用overflow-scroll添加了自己的滚动<section>包装器。 这是 Safari 的罪魁祸首，Safari在滚动溢出的元素内部时拒绝与背景混合。 当我将溢出更改为overflow-hidden时，所有混合都在工作。

<main class="block w-full h-full bg-no-repeat bg-center bg-cover overflow-hidden relative mt-0 ravn_main_gradient">

    <!-- SO here is it, I thought this section was not important, it shows that it is for Safari. When I change this to overflow-hidden, blending modes working as expected! Problem is I can't scroll now :( -->

    <section id="scroll_section" class="flex flex-col min-h-full h-full overflow-scroll pl-[184px]">   

 

    <div class="card flex flex-col min-w-[365px]">
        <div class="_first max-w-[200px] max-h-[180px] bg-[#1F4952] overflow-hidden">
           <img class="w-full opacity-50 mix-blend-hard-light" src="{% static 'img/dc_shoe.png' %}">
        </div>
        <div class="_middle half_bg h-[calc(180px+5rem)] relative">
    
            <!-- number use mix blend overlay -->
            <p class="_number absolute -bottom-7 left-[calc(200px-1.8rem)] text-white text-6xl font-secondary font-bold tracking-negative mix-blend-overlay">02</p>
            
            <div class="font-secondary text-white pl-7 pt-7 pr-8">
                <!-- main title use blend exclusion -->
                <h3 class="text-2xl font-bold mb-5 mix-blend-exclusion">3D/AR Viewer of sneakers</h3>
                <p class="opacity-80 mb-1 font-light">Lorem ipsum dolor sit amet.</p> 
                <p class="opacity-80 mb-1 font-light">Fusce dui leo, imperdiet in, aliquam sit amet.</p>
                <p class="opacity-80 mb-1 font-light">Aliquam in lorem sit amet leo accumsan lacinia.</p>
            </div>
    
            
        </div>
    </div>

</section>    
</main>

我稍微更改了 @JHeth 的顺风代码，我在其中演示了滚动的整个问题。 https://play.tailwindcss.com/IT7kkpsrhV