View Full Version : showBy Triangle Becomes Rectangle on Android

21 Aug 2012, 9:46 AM
The little triangle that showBy overlays use does not play nice with Android. The size is right, but it's just a black rectangle instead of a pointy indicator like I see in Chrome. Does anybody know a fix? At first I suspected it was a -webkit-mask issue, but the other ones work fine OOTB with ST2.0.1.1, so I'm not sure where to look.

23 Aug 2012, 4:30 AM
What Android version and is it on the native browser?

24 Aug 2012, 8:30 AM
I'm on Android 4.0.3 with an HTC device. Native browser and PhoneGap 2.0 both show a properly-aligned rectangle. Mobile Chrome shows a misaligned triangle.

I'd like to see a properly-aligned triangle in all three scenarios, but I could use some help :o)

7 Sep 2012, 6:26 AM
Update: The Sencha team has commented in the forums here that Android is losing support for webkit masks, which are used to put icons on buttons, fields, etc. They've also stated that a fix will be in the next release, but I wanted to share my work around anyway.

My DropdownMenu plugin uses showBy to display a context menu. Since the arrow mask was showing up as a rectangle, I decided to override/remove the mask and use the arrow as a background-image on the DIV instead. The base64-encoded image in the OOTB stylesheet is an off-white arrow with a transparent background. My floating Panel is styled with a white border instead of a black one, so the white triangle is a good match for my aesthetic.

Screenshot + Code: https://market.sencha.com/users/34/extensions/162

Note: If someone needs another color, they'd just need to create the image they want and update the base64 string in the CSS. Hopefully this helps somebody :o)