2

Code is very simple, as follows: 

#intro-panel .button.loading {
    background-image: url(../img/loading_button.svg);
    background-size: auto 103%;
}

Chrome 36:

enter image description here

Same goes for Chrome on android 4.2.2

However, the stock browser serves me this cryptically broken piece of crap (disregard the font):

enter image description here

I've tried explicitly enabling background-repeat as well as slapping on a 3d transform to see if hardware rendering could solve it. No luck. What could be going on?

styke
  • 2,116
  • 2
  • 23
  • 51

2 Answers2

0

Try this code:

background: url("img/loading_button.svg") 
repeat-x scroll 0 0 rgba(0, 0, 0, 0);

(may work if your trying to repeat horizontally)

Also, I think Android struggles rendering svg images, maybe try a png instead.

Undo
  • 25,519
  • 37
  • 106
  • 129
Bird Guy
  • 5
  • 4
  • Sorry, same outcome unfortunately... I will use PNG or CSS gradient solution as last resort. – styke Aug 25 '14 at 03:17
  • I read an article stating use png not svg for android so it may work. Let me know the solution if you find it – Bird Guy Aug 26 '14 at 12:49
0

i had the same problem, seems that old android browsers dont like to repeat SVGs in any direction. when i switched to PNG everything worked as expected.

user2076024
  • 13
  • 1
  • 3