fading effects on iphone

[ginerjm]

If this is off-topic, I'll understand if the mods want to remove it.

I SOLVED THIS BY REMOVING THE DIV_BLACK AND BRINGINT UP THE OPACITY OF THE MAINDV - SAME EFFECT BUT WORKS ON BOTH SYSTEMS NOW.

 

Here goes.

 

I have a little JS code that modifies the opacity of an element on my page as part of the "onload" event.  Works great in IE, not so great in Safari on my iphone.

 

I have the following:

 

maindv:  has a background image

div_black:  a fullscreen div as is the above one that is all black - hiding the image behind it.

div_text : has a paragraph of text displayed over the image

div_imgname: a text line displayed over the bottom of the image.

They are used in the following way:

 

<div id="maindv">
    <div id="div_black">
         <div id="div_text">
               <p> some text</p>
         </div>
         <div id="div_imgname">
               <p>some text</p>
          </div>
    </div>
</div>

 

The onload event calls a workiing JS function that modifies the opacity in increments from a "start" value to an "end" value.  So - one of the calls alters the black div from 100 down to 1; two other calls alter the opacity of the _text and _imgname divs from 30 to 100.  The overall effect is to begin with a black screen and quickly "bring up" the image as well as the text areas.

 

In IE it works fine.  In safari the image portion works fine, but the text pieces first fade "in" but then quickly fade "out".  I'm not sure if they are actually fading out, or if they are being covered by the image that is now showing thru the 'black' div that had its opacity reduced.

 

You can see it in action at  "jimginer.net"

 

Any ideas on what Safari might be doing to make it not work?  I mean - it seems to begin to work just fine, but then goes "too far" and hides the text areas by either covering them with the image or somehow reversing course and fading the text after making it appear.