0

I have an issue with mix-blend-mode: multiply on Safari. Working fine on other browsers but not on Safari, can't figure out what is the issue with Safari

Here is the code

Html

<div class="slider special special3">
    <h1>Finding Alpha</h1>
<img decoding="async" src="https://www.merizon.am/wp-content/uploads/2023/04/11.png">
 
    
</div>

CSS

.slider {
    min-width: 50vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4ch;
    position: relative;
}

.slider h1 {
    background: #0c0d0e;
    text-align: center;
    font-size: 52vw;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
}
nemanjad
  • 17
  • 6
  • Does this help? https://stackoverflow.com/q/70891365/12571484 – Adam Apr 27 '23 at 13:56
  • It also looks like mix blend mode has limited support. See https://caniuse.com/css-mixblendmode – Adam Apr 27 '23 at 13:58
  • Glad you got it sorted. What was the issue? This will help others searching for similar questions. It is possible to answer your own question too. – Adam Apr 27 '23 at 14:04

0 Answers0