New iOS 7 indicators overlap Flex View.ActionBar

Report · Oct 10, 2013

Using AIR 3.9 SDK, Flex 4.10 SDK, FlashPlayer 11.9, compiler targeting SWF v22, and deploying to iPhone 4S running iOS v7 and the phone indicators bleed through the action bar in all Views in a ViewNavigatorApplication for mobile:

This only started happening when I upgraded to iOS 7 on my phone so it's definitely a bug in either AIR or Flex that is specific to the upgrade. By the way, the iOS 7 upgrade totally broke all orientation in my app on the Apple Store. That app was released on AIR 3.4 and Flex 4.6 SDKs, and customers upgrading to iOS7 could no longer use the app because of failure to orient to landscape for a particularly wide view. I fixed that issue with the upgrade to AIR 3.9 and Flex 4.10, but now this other problem showed up.

I've tried using CSS to fix this, but can't add space above the Action Bar for the indicators to show correctly.

Probably a bug for Flex 4.10 SDK but might be an AIR 3.9 SDK bug, but has anyone else run into this?

The workaround with a custom Skin for the ActionBar that adds space above when running only in iOS 7 is going to be a pain to maintain. Searching the web I have found nothing about this issue yet.

Report · Oct 31, 2013

Just add padding to the action bar at the top to push it down

s|ActionBar

{

paddingTop:45;

}

Report · Oct 31, 2013

Doesn't work. If you read my post, I said:

>> "I've tried using CSS to fix this, but can't add space above the Action Bar for the indicators to show correctly."

The CSS was exactly what you suggested. Doesn't work because padding just adds space to the INSIDE of the action bar and pushes down the content (text), but the indicators still show through.

No, been there done that.

But I'm using INTERACTIVE_FULL_SCREEN now and it gets rid of the indicators in my app, so problem solved for now.

I think the Flex SDK needs to consider this issue as a bug since out-of-box "Hello World" apps all have this problem.

Report · Oct 31, 2013

if you look at other iOS7 designed apps (facebook, instagram, etc) pushing down (or adding padding at the top) the "header bar" is exactly what they do. The iOS 7 guidelines have the indicator bar transparent and showing through.

You can change the text color of the indicator to fit your app in your application.xml

UIStatusBarStyleLightContent

Report · Oct 31, 2013

OK, you've convinced me this is NOT an AIR issue.

But it's still a Flex issue since ActionBar is a child component of View classes and it doesn't do the right thing on iOS7 without applying these manual workarounds, and even if you do these workarounds, it still looks bad because you're just stretching the action bar and placing content below where the indicators show through. Yuk!

I'll go take this to the Apache Flex site. We can end this thread.

Report · Nov 11, 2013

Please see this blog post I wrote, happy coding.

http://www.ravenglass.com/blog/index.cfm/2013/11/11/How-to-fix-iOS7-and-Flex-Mobile-with-Adobe-AIR-3...