[
https://issues.apache.org/jira/browse/CB-6169?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13942314#comment-13942314
]
Joe Bowser commented on CB-6169:
--------------------------------
Here are the usual questions that we ask:
- What version of Android are you running?
- What device are you running this on?
It's well known that the Android WebView is not the same on every device, and
that every version of Android has a different implementation of this WebView.
Android 4.4 is based on Chrome 30, so this should have the same rendering as
Chrome 30 on Android 4.4 at the very least. We need this information before we
can try and reproduce this test.
> 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
> 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)
