Thursday, November 20, 2008

Another Flex Cross-Browser Incompatibility (OS X ProgressBar display)

So, Flash is supposed to solve all our cross-browser issues... only it doesn't.  My most recent discovery relates to the visual look of a ProgressBar between OS X and Windows when the mode = ProgressBarMode.MANUAL and indeterminate = true.

To illustrate this, we'll start with the following MXML component:

<mx:progressbar x="10" y="10" id="progress" labelplacement="bottom" indeterminate="true" enabled="true" minimum="0" maximum="100" label="" width="210"/>

With some styling applied, the result is this:


Now, let's say that we want to use the ProgressBar for some non-indeterminate (er, determinate) purpose, like loading some data from a server. So, let's do this:

progress.indeterminate = false;
progress.mode = ProgressBarMode.MANUAL;
progress.setProgress(0,100);

someLoader.addEventListener(ProgressEvent.PROGRESS,someProgressListener);

Great. Now, someLoader will load something, and someProgressListener will keep us up-to-date about the progress. So, say we've loaded all the data and now we're doing some processing, the progress of which we don't know since our processing function is synchronous and does not dispatch ProgressEvents. So, we want to set indeterminate back to true so that our users will know something is still happening but not show possibly incorrect progress with a determinate ProgressBar. So, let's do this:

progress.removeEventListener(ProgressEvent.PROGRESS,someProgressListener);
progress.indeterminate = true;

WTF! Now our ProgressBar looks like this:


In Firefox and IE on Windows, the ProgressBar looks identical to before, which is the expected behavior. But in Safari (at least) on OS X, we have this monstrosity. What happened? Shouldn't Flash look identical in any browser? Well, apparently it doesn't.

Fortunately, this isn't unfixable.  In fact, it's a very simple fix, though it makes zero sense to me why this changes the visual display.  Just set progress.mode = ProgressBarMode.EVENT. Turns out that this ugly displacement only occurs in OS X if (progress.mode == ProgressBarMode.MANUAL && progress.indeterminate). Oh well, something to chalk up on the list of cross-browser differences in Flash.

On another note, remember that progress.setProgress(num,total) will not do anything unless you have set progress.mode = ProgressBarMode.MANUAL. This is another thing I think is ridiculous, but the ProgressBar will ignore any calls to setProgress if mode != ProgressBarMode.MANUAL. I understand that the different ProgressBarMode settings will instruct the ProgressBar where to expect progress changes from, but it still seems odd to fully ignore calls to setProgress WITHOUT throwing any kind of error or warning when mode != ProgressBarMode.MANUAL.

Versions:  This was discovered in OS X 10.5, Flash MAC 10.0.12.36 (debug), Safari 3.2.1.

9 comments:

aneka resep kue said...

aneka resep kue This info is very helpful for me with my project time and thanks you very much for using the valuable info in this blog.

karya ismail said...

This is a great article, Thanks for giving me this information. Keep posting
Mebel Jati :
Mebel Jati :
Kursi Tamu Minimalis :
Mebel Jepara Murah :
Mebel Jati Jepara :
Mebel Jepara Online :
Mebel Jati Jepara :
Mebel Jepara :
Kursi Tamu Minimalis :
Furniture Jati Jepara :
Karya Priboemi :
Kursi Tamu Jati Murah :
Mebel jepara Online :
Mebel jepara Online :
Meja Makan Jati :
Mebel Jepara Murah :
Sofa Tamu Mewah
Meja Makan Jati Minimalis
Tempat Tidur Jati
Mebel Jati Jepara
Mebel Minimalis
Mebel Jepara Murah
Mebel Jepara Murah
Kamar Set Minimalis

Mariya Philip said...

Research proposal writing service is the service for research proposal work. Research proposal is one of the important academic writing in current education system.

xjd7410@gmail.com said...

insanity workout
louis vuitton outlet stores
adidas originals
michael kors outlet
coach factory outlet
replica watches
toms shoes
gucci handbags
louis vuitton handbags
coach outlet store online
timberland outlet
louis vuitton handbags
kate spade outlet
oakley sunglasses
oakley sunglasses
cheap jordans
oakley vault
burberry bags
air jordans
coach outlet store online clearances
beats solo 2
lebron james shoes
coach outlet store online
tory burch outlet
adidas ultra boost
cheap ray ban sunglasses
hollister shirts
ralph lauren polo
coach outlet store online clearances
chenyingying20160806

xjd7410@gmail.com said...

insanity workout
louis vuitton outlet stores
adidas originals
michael kors outlet
coach factory outlet
replica watches
toms shoes
gucci handbags
louis vuitton handbags
coach outlet store online
timberland outlet
louis vuitton handbags
kate spade outlet
oakley sunglasses
oakley sunglasses
cheap jordans
oakley vault
burberry bags
air jordans
coach outlet store online clearances
beats solo 2
lebron james shoes
coach outlet store online
tory burch outlet
adidas ultra boost
cheap ray ban sunglasses
hollister shirts
ralph lauren polo
coach outlet store online clearances
chenyingying20160806

Kizi Game said...

Wow!..Amazing.. I have no words to describe it . twizl jogos the objective is to tumble a rectangular block through each stage and deposit it into the square hole at the end. - zoxy 2 a safe place to play the very best free games! Free online games, puzzle games, girls games, car games, dress up games and more - games y10 is the largest game resources. Here you can find all free Y88 games Y8 8 Games, choice the game you like and play right now.

Linh Nguyen said...

Play KIZI 100 Games game for free! Just click and start playing kizi100game online. Best of Kizi100 game series are waiting for you! Play all the top rated friv online, friv flash games today.

furniture jati minimalis said...

Great a post. thanks you for information. keep post,,

visit us : http://furniturejatiminimalis.com/

aaa kitty20101122 said...

adidas nmd r1
http://www.kobeshoes.uk
nike huarache
yeezy shoes
michael kors purses
lebron james shoes
kyrie shoes
jordan shoes
air yeezy
longchamp bags