Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-6169

CSS scale transform ignored inside some svg elements

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Won't Fix
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: cordova-android
    • Environment:

      Android, Linux dev machine

      Description

      Try this HTML:

      <!DOCTYPE html>
      <html>
      <head>

      <style>
      .fat

      { -webkit-transform:scale(6,1); transform:scale(6,1); }

      .lean

      { -webkit-transform:translate(50,0); transform:translate(50,0); }

      </style>

      </head>
      <body>

      <center><div class='fat'>Blah</div></center>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow' class='fat'/>
      <text text-anchor='middle' class='fat'>NotFat</text>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow' class='fat'/>
      <text text-anchor='middle' transform='scale(6,1)'>Bbb</text>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <g transform='scale(6,1)'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'/>
      <text text-anchor='middle'>Ccc</text>
      </g>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <g class='fat'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'/>
      <text text-anchor='middle'>NotFat</text>
      </g>
      </svg>
      <br/>

      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow' class='lean'/>
      <text text-anchor='middle' class='lean'>Aaa</text>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow' class='lean'/>
      <text text-anchor='middle' transform='translate(50,0)'>Bbb</text>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <g transform='translate(50,0)'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'/>
      <text text-anchor='middle'>Ccc</text>
      </g>
      </svg>
      <br/>
      <svg id="pic" height='50' viewBox='-100 -15 200 30'>
      <g class='lean'>
      <circle cx='0' cy='0' r='15' stroke='black' stroke-width='3' fill='yellow'/>
      <text text-anchor='middle'>Ddd</text>
      </g>
      </svg>
      </body>
      </html>

      The two texts showing NotFat appear fat in chrome and firefox, but not cordova. The first four circles should be fat but only the third is. In the second set of 4, Cordova behaves the same as FF and Chrome.

        Attachments

          Activity

            People

            • Assignee:
              bowserj Joey Robert Bowser
              Reporter:
              adrianmay Adrian May
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: