Nexus 5(lollipop)＋Chromeでのlinear-gradient描画不具合

スマートフォンで当サイトを閲覧した際に一部のページで表示不具合が発生していたので原因を調査していたところ、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%にした画像等が含まれた際に、グラデーションが無効化され真っ黒な背景になってしまうのです。

以前は問題なく表示されていたのですが、Nexus 5にlollipopを導入もしくはChromeをVer.41にアップデートした頃からおかしくなっているのでどちらかに問題があるとは思うのですが一旦バージョンを落として確認するとなると色々と不都合があるのでどちらに原因があるか特定には至っていません。

ただ、同じバージョンのChromeをインストールした~~Nexus 7(2012)や~~Galaxy Nexusでは正しく表示されていることから端末側の問題のような気がしています。上記ソースを少し弄っただけ(imgタグやcssのborder指定を削ったり)で正しく表示されたりもすることを勘案すると、lollipopで問題になっているメモリリークが原因なのかも。まもなくリリース予定のAndroid 5.1.1ではメモリリークへの対応が行われているそうなのでそれで治ってくれると良いのですが、それでも改善されなければlinear-gradientに頼らない実装に置き換えることも検討しなければならなくなるかもしれません。