みかづきブログ その3

3ヶ月つづけてみました。

grunt-contrib-cssminでminifyしたbackground-imageが一部Androidで表示されない

先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。

github.com



現象

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}