スマートフォンで当サイトを閲覧した際に一部のページで表示不具合が発生していたので原因を調査していたところ、Nexus 5とChromeブラウザとの組み合わせに於いてのみ発生しうる環境依存の現象であることが判明。
下記が実証ソース。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>テスト</title>
<style>
div{
border:1px solid #666;
background:linear-gradient(to bottom,#eee,#fff)
}
img{width:100%}
</style>
</head>
<body>
<div>
1<img src="test.png">
2<img src="test.png">
3<img src="test.png">
4<img src="test.png">
</div>
</body>
</html>linear-gradientでグラデーションをかけた要素の中に表示幅100%にした画像等が含まれた際に、グラデーションが無効化され真っ黒な背景になってしまうのです。
