title: HTML with SVG tags and CSS -> Android SVG Render BUG
body: <p>Currently working on a website which works fine in every browser I tested it. It only doesn't work in a any browser which is run on Android device - Samsung Galaxy Tab A 10.1 SM-T580 16Gb. </p>
  
  <p>This is a screenshot of the problem:</p>
  
  <ul>
  <li><a href="https://i.stack.imgur.com/UEkRJ.png" rel="nofollow noreferrer">Android Render SVG Bug 1</a>, </li>
  <li><a href="https://i.stack.imgur.com/lX4aJ.png" rel="nofollow noreferrer">Android Render SVG Bug 2</a> </li>
  </ul>
  
  <p>Another one SVG <a href="https://i.stack.imgur.com/QMO3R.png" rel="nofollow noreferrer">works fine</a> on this device.</p>
  
  <p>On Desktop devices, iPads and iPhones there is no such bug. Here is the same SVG (as Bug 1 showing) <a href="https://i.stack.imgur.com/eOjs1.png" rel="nofollow noreferrer">Desktop 
   print-screen</a>.</p>
  
  <p><strong>Html code, SVG code added using jquery, also I add the mask and transform:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#svg_plan_handler {
     height: 100%;
      overflow: hidden;
      width: 100%;
      margin-bottom: 2em;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="svg_plan_handler"&gt;
      &lt;div&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" 
              xmlns:xlink="http://www.w3.org/1999/xlink" 
              xml:space="preserve" 
              width="100%" height="100%" 
              version="1.1" 
              style="shape-rendering: geometricPrecision; text-rendering: geometricPrecision; fill-rule: evenodd; clip-rule: evenodd; height: 658px; transform: scale(6.98011, 6.98011) translate(-255px, -42px);" 
              viewBox="0 0 36872 9821" 
              class="animation"&gt;
              &lt;defs&gt;
               &lt;style type="text/css"&gt;
               &lt;![CDATA[
                .str0 {stroke:black;stroke-width:112.75;stroke-linecap:square;stroke-linejoin:round}
                .str1 {stroke:black;stroke-width:113.07;stroke-linecap:square;stroke-linejoin:round}
                .str5 {stroke:black;stroke-width:119.54;stroke-linecap:square;stroke-linejoin:round}
                .str4 {stroke:black;stroke-width:119.82;stroke-linecap:square;stroke-linejoin:round}
                .str2 {stroke:black;stroke-width:120.08;stroke-linecap:square;stroke-linejoin:round}
                .str3 {stroke:black;stroke-width:120.29;stroke-linecap:square;stroke-linejoin:round}
                .fil4 {fill:none}
                .fil6 {fill:none;fill-rule:nonzero}
                .fil5 {fill:black}
                .fil2 {fill:#029E21}
                .fil1 {fill:#3FA4FF}
                .fil0 {fill:#A50F02}
                .fil7 {fill:#CCCCCC}
                .fil3 {fill:#FF6600}
                ]]&gt;
              &lt;/style&gt;
              &lt;/defs&gt;
              &lt;polygon id="perimetr_f_1_kv_17" class="fil7 perimetr_kv" points="32140,5828 32140,4989 27595,4989 27595,7642 30702,7642 30702,6464 30702,6459 30707,6459 32072,6459 32072,5833 32072,5828 32077,5828 "&gt;&lt;/polygon&gt;
              &lt;g id="entrance" style="mask: url("#planmaskingapartments");"&gt;
                 &lt;g id="f_1"&gt;
                    &lt;path id="f_1_entrance_1" class="fil4 str0" d="M16886 7882l1477 0m0 0l0 -34m0 0l-1477 0m0 0l0 34m-16676 -3653l1022 0m435 0l193 0m77 0l1380 
                       ... bla-bla ...
                    72l0 -144m893 144l0 -144"/&gt;
                 &lt;/g&gt;
              &lt;/g&gt;
              &lt;path id="bg_f_1_kv_17" class="fil3 selected" d="M31300 5876l697 0 -2 430 82 0 0 158 -263 1 0 -106 -514 0 0 -483zm-593 -892l0 165 58 0 0 -165 492 0 0 1481 -492 0 0 -733 0 -121 -58 0 0 121 -1390 0 0 -748 1390 0zm593 849l0 -849 845 0 0 849 -845 0zm-1983 1814l0 -1886 1390 0 0 1886 -1390 0zm-1727 0l0 -2663 1669 0 0 2663 -1669 0z"&gt;&lt;/path&gt;
  
            &lt;mask id="planmaskingapartments"&gt;
              &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#perimetr_f_1_kv_17" fill-opacity="0" stroke-width="100%" stroke="#000000"&gt;&lt;/use&gt;
              &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#perimetr_f_1_kv_17" stroke-width="3%" stroke="#777777"&gt;&lt;/use&gt;
              &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bg_f_1_kv_17" stroke="#c1f0d3" stroke-width="1.5%"&gt;&lt;/use&gt;
            &lt;/mask&gt;
          &lt;/svg&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Have some body any idea, how to fix it?</p>