Eu tenho um CSSbackground-image definido em um elemento de altura e largura do fluido. É um SVG e o comportamento pretendido é estender-se nas direções necessárias para cobrir toda a área do elemento. No Chrome, Safari e até no Internet Explorer 9 ruim, o dimensionamento funciona como eu quero:

Mas no Firefox (desktop e celular), a saída é mais ou menos assim:

Após algumas pesquisas, parece que o Firefox tende a ser mais rígido quanto à renderização SVG do que outros navegadores, pois adere à versão mais recente da especificação. (O Opera Mini também falha ao renderizar esta imagem de plano de fundo (quando ativada), pois não dimensiona a imagembaixae, dada a tradição do mecanismo Presto de lidar com especificações com a seriedade de uma tempestade de verão, ele pode esperar a mesma abordagem atualizada que o Firefox.)

Você pode ver a página ao vivo em que estou trabalhandohttp://ti.gt/. Também forneci o código com o qual estou trabalhando abaixo:

HTML

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>

CSS

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #d23e2c;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMzMzIDc1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDAsMCAxMzMzLDAgMCwzMjAuNTMgLTcyLjY3LDQ4LjQyIDUyLjQ1LDM3LjU3IC0xMjYuMzEsNTIuODQgNTAuMTMsMTM2LjE5IC0xOS45OCwzNy4yNiAtMzkuNDcsLTExLjcxIC0zOC43NSw0MC40NyAtNjMuMzIsLTEyLjA3IC0zMC40NCwtMTM1LjYgLTcuOTQsMy4yOCAyNC43NCwxNDAuOTUgLTM4LjEzLDMwLjI2IC00NC4zNSwtMy4zMyAtMzUuODMsMjMuMzkgLTQ4LjkzLC0xMy4yMiAtMzguMjQsLTE0MS40OCAtMTAuNTcsMy42OCA2LjIsMTQ4Ljk3IC0zMy44OCwyMC40NiAtMjUuMjYsLTEzLjg1IC0yMi40OCwzMS40OSAtMjcuMzYsLTIyLjMyIC0zMiwyNC4zNCBMIDY4MC41NSw3MTguNiA2NjQuNyw1NjQgbCAtMTcuMDgsMC45MSAtMjEuODgsMTU5LjczIC0yOS4xNywyNS4zNiAtMS43MiwwIC0yNy44NCwtMjMuMDIgLTIzLjMsMTMuODggLTIxLjYsLTIwLjcxIC0yMi4zMSwxMS4yMSAtMjQuMTMsLTIzLjE4IDEwLjE0LC0xNTUuNCAtNC43NywtMi4yIC0zMy42NCwxNTcuNjMgLTI5Ljk3LDE0LjIxIC04LjgsLTEuMTcgLTM1LjIxLC0yMC4zOCAtMzQuMTcsMTAuNDEgLTguNjMsLTIuNzkgLTMyLjkzLC0yNi42OCAyNC45NiwtMTUxLjU0IC0xMC42NiwtMi4wOSAtNDUuNjIsMTQwLjM0IC0zMi40OSwxNS4zMyAtNTUuMDgsLTQwLjM2IC0zOC45OSw5LjA3IEwgMTA2LjgyLDYxOC40MyAxNTMuMjYsNDg2LjA2IDguODUsNDI4LjU3IDYzLjkzLDM4MC44NiAwLDMzMy4wNSB6IiBmaWxsPSIjZDIzZTJjIi8+PHBhdGggZD0iTSAzMDIuNzYsMzQuNTggNDY0Ljk4LDE1OC45MyA0MjMuMDcsMzY3LjM3IDI3Ny4yNywyODQuMjIgMTgxLjc5LDMzMi42NiA4MS41NywxNDMuMDggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gMTA3OC45Miw0MC4xMSAxOTYuOSw3Ny44NCAtMTA5Ljk5LDI1My4wNyAtMTAzLjg5LC02MC4wNyAtMTUuMzcsMS45IC0xMTkuMDUsNDkuMjIgLTI1LjQ3LC0yMjcuMzQgeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNjA1LjY1LDMyMi43NCAzLjYsMTA3LjE5IC0xMDAuNzYsMS41NyA2NC41OSwtMzMuMzggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNzE4LjUxLDMyNS4zIDMzLjMzLDc3LjAyIDc5LjQxLDI4LjI3IC0xMTkuOSwxOS40OSB6IiBmaWxsPSIjYTgzMTIzIi8+PC9zdmc+") no-repeat 100% 100%, none;
}

O URI de dados não parece ser o ponto de discórdia, mas aqui está o arquivo SVG decodificado:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1333 750" version="1.1">
    <path d="m 0,0 1333,0 0,320.53 -72.67,48.42 52.45,37.57 -126.31,52.84 50.13,136.19 -19.98,37.26 -39.47,-11.71 -38.75,40.47 -63.32,-12.07 -30.44,-135.6 -7.94,3.28 24.74,140.95 -38.13,30.26 -44.35,-3.33 -35.83,23.39 -48.93,-13.22 -38.24,-141.48 -10.57,3.68 6.2,148.97 -33.88,20.46 -25.26,-13.85 -22.48,31.49 -27.36,-22.32 -32,24.34 L 680.55,718.6 664.7,564 l -17.08,0.91 -21.88,159.73 -29.17,25.36 -1.72,0 -27.84,-23.02 -23.3,13.88 -21.6,-20.71 -22.31,11.21 -24.13,-23.18 10.14,-155.4 -4.77,-2.2 -33.64,157.63 -29.97,14.21 -8.8,-1.17 -35.21,-20.38 -34.17,10.41 -8.63,-2.79 -32.93,-26.68 24.96,-151.54 -10.66,-2.09 -45.62,140.34 -32.49,15.33 -55.08,-40.36 -38.99,9.07 L 106.82,618.43 153.26,486.06 8.85,428.57 63.93,380.86 0,333.05 z" fill="#d23e2c"/>
    <path d="M 302.76,34.58 464.98,158.93 423.07,367.37 277.27,284.22 181.79,332.66 81.57,143.08 z" fill="#a83123"/><path d="m 1078.92,40.11 196.9,77.84 -109.99,253.07 -103.89,-60.07 -15.37,1.9 -119.05,49.22 -25.47,-227.34 z" fill="#a83123"/>
    <path d="m 605.65,322.74 3.6,107.19 -100.76,1.57 64.59,-33.38 z" fill="#a83123"/>
    <path d="m 718.51,325.3 33.33,77.02 79.41,28.27 -119.9,19.49 z" fill="#a83123"/>
</svg>

Eu tentei várias táticas para fazer o Firefox aceitar minhas demandas, mas até agora nenhuma foi bem-sucedida. Eu olheieste documento é exatamente sobre este tópico, mas não consigo extrair nenhum conselho dele.