2

I have in my less file line like this:

.icon-enter {
  width: 22px;
  height: 18px;
  background: url('data:image/svg+xml;...') no-repeat;
  background-size: 100%;
}

But after it would be compiled I have result:

.icon-enter {
  width: 22px;
  height: 18px;
  background: url('data:image/svg+xml;...') 0 0/100% no-repeat;
}

So it's work fine in new Chrome. But in Android Stock Browser on Android 4.1 icon doesn't apear. If I add background-size: 100% in css and remove it from background then it will work fine in Android 4.1.

I use Ember.js and ember-cli and addon ember-cli-less. Can I change rule of compiling for background-size?

Dmitro
  • 1,489
  • 4
  • 22
  • 40
  • I am using a slightly older version of the Less compiler and it doesn't compress the properties automatically (what seems to be happening in your case is the `background-size` is getting added to the shorthand `background` property). Are you using any compressors or minifiers? – Harry Oct 23 '15 at 11:20
  • Less never modifies even the values you write (except some trivial cases like outputing non-transparent color values in hex). So it's not Less but some other tool in your chain performs this backsize mod (minifier? prefixer? other?). – seven-phases-max Oct 23 '15 at 12:33
  • Yes, it is minifier, and when I set `!important` for `background-size` minifier doesn't compress. – Dmitro Oct 23 '15 at 13:20
  • Hmm, you're better to not use hacks like `!important` (this way you're just asking for troubles in future) but read the minifier documentation and configure it to perform more friendly to the older browsers. – seven-phases-max Oct 23 '15 at 13:37
  • Please, update your question, or delete it. According to your comments it no longer makes sense. Thank you! – JotaBe Nov 02 '15 at 18:25

0 Answers0