Revision: 30278
Author: philip.breau
Date: July-26-12 4:09:46 PM
Message:
MOBI-286 - carousel not working in IE9

Modified : /icemobile/trunk/icemobile/resources/themes/ipad/default-carousel.css

issue reappears when setting PROJECT_STAGE Production, so it could be related to either CSS or JavaScript minification

found this same problem in FF 6.0.2 on Mac OS Lion.
debug javascript and found an issue in showcase.js
on line 7 which I changed to
} else if (body.parentElement && body.parentElement.clientHeight) {

but this did not fix the issue.

Noted in mobitest, that carousel examples worked well on the same browser (FF 6.0.2), so went and added carousel into a contentStack and a tabSet within a contentStack. No problem and carousel works.
Even in mobileshowcase, there are no further javascript errors (other than the one mentioned above which I fixed locally).

It would appear, that this is specific to either pagePanel or application specific css (as I have tried it within the same configuration in mobitest--but no composite components either so maybe that's a factor?

page in mobitest/layout/panelStack-tabSet.jsf
panel1 (of contentStack) with tab panel5 has a carousel and
panel3 of contentStack has carousel
Both of these works fine.
Can someone try it on IE9 to see if this page works there as well?
Further work may be looked at regarding pagePanel/application css or the composite components used (although I am getting no js or server error)

I downloaded iscroll 4.2 (llatest) and got Cruz to test the sample on IE9 (works). The mobitest page does not.

rev 30384 has the new iscroll-4.2 libs checked in and javascript and renderers are modified appropriately. New features include a "next" and "prev" pagination (see mobitest example test page), has "zoom" feature built in
The pagination features will still have to be styled.
all mobitest examples pass on Chrome, Safari, IE9 on desktop. and iPhone and iPad.

mediacast:- problem here is that the upload somehow removes the update script tag. Have to refresh or reload the page to get it back again.

mobileshowcase:- testing shows that removal of position:absolute; from the contentPane styling makes this work correctly. So Patrick or Phillip I"m sure can come up with something.

iPad theme seems to be rendering differently this component on desktop browsers and iPad. If I had more time, I would implement a "width" attribute as I think this would help in the rendering (esp IE9).

Changing mobitest to "Production" breaks the carousel as observed in mediacast earlier.

A fix for the script update issue is checked in: the script is now a child of the carousel div, causing it to be re-executed if the carousel div is replaced. Further, the iscroll scroller.parent is tested to see if iscroll is still attached to the DOM. If not, it is rebuilt. Likely it needs to be rebuilt every time it is updated, but that requires more change to the code.

Please verify carousel using IE9 in http://labs.icesoft.com/mediacast/mediacast.jsf and close if successful.

CarouselRenderer is no longer using iscroll-min.js. This file was out of date and is not minified by our compressor, it was simply checked in. Minification is an optimization that is not strictly necessary.

Verified working on IE9.