混合混合模式不适用于手机浏览器

Question

我正在建立一个快速响应的网站。到目前为止，我可以在不同的屏幕分辨率（桌面，笔记本电脑，平板电脑）上进行混合混合模式。但是当我在手机上测试它时（galaxy S5，UC浏览器），混合混合模式似乎被打破并显示错误。请看一下这些照片：

**更新：我在手机上的CHROME浏览器上测试它是否正常，所以它必须依赖于浏览器？

应该如何看待

它在手机上的外观如何

我的代码：

＆＃13;

＆＃13;

.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;}
	}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

UC浏览器不支持{strong} <{1>}属性。

您可以在此处查看浏览器支持：

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

您的代码没有任何问题。只是许多浏览器不支持该规则。您可以随时测试所有浏览器是否支持您的规则，或者不使用网站

http://caniuse.com/