CODEWITHSUNDEEP
htmlsafaritailwind-cssblending
TomRavn
TomRavn

Reputation: 1244

Diffrent blending mode results between Safari and the other browsers

I guess this issue does not have solution but yet I'd like to ask you. I am playing with Tailwind and blending modes but I am getting different results only in Safari browser. It looks like Safari blend ok with underlying element but it does not blend with main container background.

I am attaching code and pictures below for better understanding.

enter image description here

My HTML code mixed with tailwind

<!-- 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>

Is there any solution how to solve this issue? I can't find anything and I doubt there is any. Thank you.

Upvotes: 0

Views: 1129

Answers (1)

TomRavn
TomRavn

Reputation: 1244

Ok thanks to @JHeth I figured where the problem is. It can be familiar for the others, but I did not know. My design is like this <main> container is streched into full-width and full-height of <body>. So <body> and <main> does not move when scrolling. I added own scrolling <section> wrapper inside with overflow-scroll. And this is culprit in Safari, Safari refusing blend with background when it is inside element which overflow with scrolling. When I change overflow to overflow-hidden, all blends are working.

<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>

I slightly changed the tailwind code from @JHeth where I demonstrate whole problem with scrolling. https://play.tailwindcss.com/IT7kkpsrhV

Upvotes: 1

Related Questions