Question

Ich bin mit dem folgenden CSS Code:

.el { 
    width: 20px; 
    height: 20px; 
    background-color: steelblue; 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M29.839 10.107q0 0.714-0.5 1.214l-15.357 15.357q-0.5 0.5-1.214 0.5t-1.214-0.5l-8.893-8.893q-0.5-0.5-0.5-1.214t0.5-1.214l2.429-2.429q0.5-0.5 1.214-0.5t1.214 0.5l5.25 5.268 11.714-11.732q0.5-0.5 1.214-0.5t1.214 0.5l2.429 2.429q0.5 0.5 0.5 1.214z'%3E%3C/path%3E%3C/svg%3E"); 
    background-size: 14px 14px; 
    background-position: center center; 
    background-repeat: no-repeat; 
    color: #fff; 
} 

Fiddle: https://jsfiddle.net/z8gb3bzL/

Das Element macht richtig auf allen Desktop-Browser, und auch auf dem iPhone, iPad , Blackberry und Windows Phone (das ist .. überall) .. außer Android. Ich habe versucht, bis zur Version 4.3 und noch die Grafik Glitch bekommen:

Es sieht aus wie es den Hintergrund Clipping, anstatt sie zu Ändern der Größe. Ich habe auch versucht, ein externes SVG-Bild zu verwenden, aber ich bekomme die gleichen Ergebnisse.

Ich suchte überall (google'd, caniuse, etc) und sehe keine gemeldeten Fehler in diesem Fall. Irgendwelche Ideen?

Answer 1

... um Gottes willen! Ich habe versucht, diesen Bug für mehrere Tage zu bearbeiten, und es hat mich einfach getroffen. Die Svg Bild erfordert, dass eine Breite gleich der Viewbox eingestellt ist, um zu arbeiten:/

Sorry Jungs für irgendwelche Unannehmlichkeiten durch meine Post verursacht - hoffentlich hilft es jemand, der das gleiche Problem hat.

<...> 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' **width='32' height='32'**%3E%3Cpath fill='%23fff' d='M29.839 10.107q0 0.714-0.5 1.214l-15.357 15.357q-0.5 0.5-1.214 0.5t-1.214-0.5l-8.893-8.893q-0.5-0.5-0.5-1.214t0.5-1.214l2.429-2.429q0.5-0.5 1.214-0.5t1.214 0.5l5.25 5.268 11.714-11.732q0.5-0.5 1.214-0.5t1.214 0.5l2.429 2.429q0.5 0.5 0.5 1.214z'%3E%3C/path%3E%3C/svg%3E"); 
<...> 

Aktualisiert (arbeitet an Android) Geige: https://jsfiddle.net/z8gb3bzL/1/