文章/答案/技术大牛

发布

社区首页 >问答首页 >Safari和其他浏览器之间的不同混合模式

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

Stack Overflow用户

提问于 2022-01-16 18:39:15

回答 1查看 315关注 0票数 0

我想这个问题没有解决办法，但我想问你。我正在玩尾风和混合模式，但我得到不同的结果，只有在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>

有什么办法解决这个问题吗？我什么也找不到，我也怀疑有什么。谢谢。

html

safari

tailwind-css

blending

回答 1

Stack Overflow用户

发布于 2022-01-17 10:29:02

好吧，多亏了@JHeth，我才知道问题出在哪里。对其他人来说可能很熟悉，但我不知道。我的设计就像这个<main>容器，散落在<body>的全宽和全高度.因此，<body>和<main>在滚动时不会移动。我在<section>中添加了自己的滚动overflow-scroll包装器。这是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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70733057

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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