0
私は応答性の高いウェブサイトを作っています。これまでは、さまざまな画面解像度（デスクトップ、ラップトップ、タブレット）でミックスブレンドモードを動作させることができました。しかし、私が電話（銀河のS5、UCのブラウザー）でそれをテストすると、ミックスブレンドモードは壊れているように見え、間違って表示されます。写真を見てください：
**アップデート：私の携帯電話のCHROMEブラウザでテストしても正常に動作するため、ブラウザに依存している必要がありますか？それは電話でどのように見えるか
電話機のブラウザで混合ブレンドモードが機能しない
をどのように見えるべきか
マイコード：
.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 {
\t
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) {
\t \t #works.stackgrid .item { width: 50%; }
\t \t .logo {width: 100%;}
\t \t .quote-phrase {font-size:30px; line-height:30px; text-align: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold; display: block; }
\t \t .i{font-size:42px;line-height:55px; text-align-last: justify; letter-spacing: 1px; color: #595959; font-family: Neusa ExtraBold; margin-left:-1px;}
\t \t .digital { \t \t font-size: 18px;line-height:19px; text-align: right;
\t \t width:100%;
\t \t padding-bottom: 15px;
\t \t margin-left:72px;
\t \t padding-top: 10px;
\t \t letter-spacing: 1.2px;}
\t \t #carousel{margin-left:-1px; width:140%; }
\t #view{font-size: 16px; top:40%; left: 40%;}
\t #header .logo-wrap { margin: 50px 0 -150px 0; }
\t #footer p {font-size:16px; line-height:17px; width: 200px;}
\t }<a href="works.html?option=haivinh" class="permalink">
\t \t \t \t \t <div class="desktop-3 mobile-half columns">
\t \t \t \t \t \t <div class="item first-row">
\t \t \t \t \t \t \t <h3>Hai Vinh Honey</h3>
\t \t \t \t \t \t \t <span class="category">Identity, packaging</span>
\t \t \t \t \t \t \t <div class="imgwrapper">
\t \t \t \t \t \t \t <div class="imgcon">
\t \t \t \t \t \t \t <img src="http://i.imgur.com/JefejGa.png" /></div>
\t \t \t \t \t \t \t <div id="view">view</div></div>
\t \t \t \t \t \t </div><!-- // .item -->
\t \t \t \t \t </div><!-- // .desktop-3 -->
\t \t \t \t </a>
を使用していない場合は、いつでもテストすることができます。カスタムブラウザ、特に携帯電話では、最新のWebページCSSルールを完全にサポートする可能性は低いです。 –