You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "Joe Bowser (JIRA)" <ji...@apache.org> on 2014/05/14 19:07:15 UTC
[jira] [Resolved] (CB-6169) CSS scale transform ignored inside some
svg elements
[ https://issues.apache.org/jira/browse/CB-6169?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Joe Bowser resolved CB-6169.
----------------------------
Resolution: Won't Fix
This is a WebView issue, and is something outside our control. Confirmed on Samsung Galaxy Note
> CSS scale transform ignored inside some svg elements
> ----------------------------------------------------
>
> Key: CB-6169
> URL: https://issues.apache.org/jira/browse/CB-6169
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android
> Environment: Android, Linux dev machine
> Reporter: Adrian May
> Assignee: Joe Bowser
> Labels: css, scale, svg, transform
>
> 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.
--
This message was sent by Atlassian JIRA
(v6.2#6252)