Search code examples
htmlcssmobileresponsivemobile-browser

Mix-blend-mode doesn't work on phone browser

I'm making a responsive website. So far I could make mix-blend-mode work on different screen resolutions (desktop, laptop, tablet). But when I test it on the phone (galaxy S5, UC browswer),the mix-blend-mode seems broken and displays it wrong. Please take a look at the pics:

**UPDATE: I test it on CHROME browser on my phone and it works normally, so it has to depend on the browser?

How it should look
enter image description here

How it looks on phone
enter image description here

My code:

.imgwrapper {
  position: relative;
   display: inline-block;
}



.imgcon + div {
 position: absolute;
  left: 42%;
  top: 44%;
  color: white;
  text-decoration: underline;
  opacity:0;
  display: block;
  pointer-events: none;
  font-size: 18px;
  
  letter-spacing: 4px;

}

.imgcon {
	
 display: inline-block;
  position: relative;

  background: rgba(209, 19, 15, 0);
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
   mix-blend-mode: multiply;
}
.imgcon > img {

 display: block;
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
}
.imgcon:hover {
  background: #b41f24;
    background: rgba(180, 31, 36, 0.85);


}
.imgcon:hover > img {
  z-index: -1;
  -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
  filter: grayscale(100%) blur(1.5px) contrast(100%) ;
  mix-blend-mode: multiply;

}

.imgcon:hover + div {
  display: block;
  opacity: 1;
  z-index: 1;
}


@media screen and (max-width: 479px) { 
		#works.stackgrid .item { width: 50%; }
		.logo {width: 100%;}
		.quote-phrase {font-size:30px; line-height:30px; text-align: justify; letter-spacing: 3px; color: #595959; font-family:  Neusa ExtraBold; display: block; }
		.i{font-size:42px;line-height:55px; text-align-last: justify; letter-spacing: 1px; color: #595959; font-family:  Neusa ExtraBold; margin-left:-1px;}
		.digital {		font-size: 18px;line-height:19px; text-align: right;
		width:100%;
		padding-bottom: 15px;
		margin-left:72px;
		padding-top: 10px;
		letter-spacing: 1.2px;}
		#carousel{margin-left:-1px;   width:140%; }
	#view{font-size: 16px;  top:40%; left: 40%;}
	#header .logo-wrap { margin: 50px 0 -150px 0; }
	#footer p {font-size:16px; line-height:17px; width: 200px;}
	}
<a href="works.html?option=haivinh" class="permalink">
					<div class="desktop-3 mobile-half columns">
						<div class="item first-row">
							<h3>Hai Vinh Honey</h3>
							<span class="category">Identity, packaging</span>

							<div class="imgwrapper">
							<div class="imgcon">
							<img src="http://i.imgur.com/JefejGa.png" /></div>
							<div id="view">view</div></div>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
				</a>

Solution

  • The mix-blend-mode property is not supported by UC browser for android.

    enter image description here

    You can check the browser support here:

    http://caniuse.com/#search=mix-blend-mode

    There is nothing wrong with your code. It is just that the rule is not supported by many of the browsers. You can always test if your rule is supported by all browsers or not using the website

    http://caniuse.com/