Details
-
Bug
-
Status: Open
-
Major
-
Resolution: Unresolved
-
Adobe Flex SDK Previous
-
None
-
None
-
Affected OS(s): All OS Platforms
Affected OS(s): All OS Platforms
Language Found: English
Description
Steps to reproduce:
1. Compile and run this application:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Group id="group1" x="0" width="100" height="100" maskType="alpha">
<s:mask>
<s:Group>
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:mask>
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>
<s:Group id="group2" x="100" width="100" height="100" maskType="alpha">
<s:mask>
<s:Group>
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:mask>
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>
</s:Application>
2. Try to click on the buttons
3.
Actual Results:
The first button is clickable, the second button ignores mouse events.
Expected Results:
Both Buttons should be clickable.
Workaround (if any):
Add the mask yourself so that it's not a child of the DisplayObject its trying to mask (if you do this, remember you need to set the x/y's correctly on the mask):
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Group id="group1" x="0" width="100" height="100" maskType="alpha" mask="
{group1Mask}">
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>
<s:Group id="group1Mask">
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
<s:Group id="group2" x="100" width="100" height="100" maskType="alpha" mask="
{group2Mask}">
<s:Button label="content" click="trace('click')" width="100%" height="100%" />
</s:Group>
<s:Group id="group2Mask" x="100">
<s:Ellipse width="100" height="100">
<s:fill>
<s:SolidColor color="red" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:Application>