title: Diffrent blending mode results between Safari and the other browsers
body: <p>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.</p>
  <p><strong>I am attaching code and pictures below for better understanding.</strong></p>
  <p><a href="https://i.stack.imgur.com/DfoEz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DfoEz.png" alt="enter image description here" /></a></p>
  <p><strong>My HTML code mixed with tailwind</strong></p>
  <pre><code>&lt;!-- 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%);
  
  } --&gt;
  
  &lt;main class=&quot;block w-full h-full bg-no-repeat bg-center bg-cover overflow-hidden relative mt-0 ravn_main_gradient&quot;&gt;
  
  &lt;div class=&quot;card flex flex-col min-w-[365px]&quot;&gt;
      &lt;div class=&quot;_first max-w-[200px] max-h-[180px] bg-[#1F4952] overflow-hidden&quot;&gt;
         &lt;img class=&quot;w-full opacity-50 mix-blend-hard-light&quot; src=&quot;{% static 'img/dc_shoe.png' %}&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;_middle half_bg h-[calc(180px+5rem)] relative&quot;&gt;
  
          &lt;!-- number use mix blend overlay --&gt;
          &lt;p class=&quot;_number absolute -bottom-7 left-[calc(200px-1.8rem)] text-white text-6xl font-secondary font-bold tracking-negative mix-blend-overlay&quot;&gt;02&lt;/p&gt;
          
          &lt;div class=&quot;font-secondary text-white pl-7 pt-7 pr-8&quot;&gt;
              &lt;!-- main title use blend exclusion --&gt;
              &lt;h3 class=&quot;text-2xl font-bold mb-5 mix-blend-exclusion&quot;&gt;3D/AR Viewer of sneakers&lt;/h3&gt;
              &lt;p class=&quot;opacity-80 mb-1 font-light&quot;&gt;Lorem ipsum dolor sit amet.&lt;/p&gt; 
              &lt;p class=&quot;opacity-80 mb-1 font-light&quot;&gt;Fusce dui leo, imperdiet in, aliquam sit amet.&lt;/p&gt;
              &lt;p class=&quot;opacity-80 mb-1 font-light&quot;&gt;Aliquam in lorem sit amet leo accumsan lacinia.&lt;/p&gt;
          &lt;/div&gt;
  
          
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/main&gt;
  </code></pre>
  <p>Is there any solution how to solve this issue? I can't find anything and I doubt there is any. Thank you.</p>