先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。
現象
SCSS
.btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; }
上記のようなSCSS(backgroundでイメージ、ポジション、リピートを設定し、background-sizeを設定)で設定したbackground-imageが一部Android端末で表示されない。
原因
Androidの一部端末はbackground-sizeをショートハンドで記述すると効かないにも関わらず、minifyするときにショートハンドにされてしまっていた。
CSS
.btn{background:url(/img/btn.png) center center/contain no-repeat}
対策
optionでnoAdvancedをtrueにすればOK。
// contrib-cssmin cssmin: { dist: { files: { 'dist/data/css/main.css': ['dist/data/css/*.css'] }, options: { noAdvanced: true, } } }
CSS
.btn{background:url(/img/btn.png) center center no-repeat;background-size:contain}