Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Visitor
ymai
Posts: 1
Registered: ‎02-02-2011
My Device: Bold 9700
My Carrier: Rogers

Webkit transformation not working in browser on OS 7

Hi,

 

I have this web page that has a spinning image working on BB OS 6 running on Torch.  When I browse to the same web page on the OS 7 (using simulator), neither the spinning image or the text on top of the spinning image is showing up.  If i comment out these two lines, then everything will show up, but of course the image is not spinning anymore.

 

 

/*    -webkit-animation-duration: 5s;
    -webkit-transform-style: preserve-3d;*


Is this a bug in the new OS?  If so, where do I file that?  The whole html and css is included here below.  Any help is greatly appreciated.

 

<html>
<head>
<LINK REL=StyleSheet HREF="rotation.css" TYPE="text/css">
</head>
<body>
<header>Mobile Banking PoC</header>
   <div id="spinner">
        <img src="some-logo.png" align="center" width="200" height="200" />
   </div>
   <div id="text" style="position:absolute;left:0px;top:100px;">
        <p>this is some text asdfasdfasdfasdfasdfasdfasdf<p>
    </div>
</body>
</html>

 

@-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);}
    to { -webkit-transform: rotateY(359deg);}
}

#spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 100px 100px 0px;
    -webkit-backface-visibility: visible;

    z-index:-1;
} 

Please use plain text.
New Contributor
remi_grumeau
Posts: 4
Registered: ‎11-29-2010
My Device: 9810
My Carrier: SFR

Re: Webkit transformation not working in browser on OS 7

I'd rather see it as a z-index issue more than a transform problem.

see http://www.we-are-gurus.com/labs/bb7-spinner.html

 

Using a perspective on the parent node and removing position:absolute on spinner, you get a 3D effect, which helps to see how the logo goes on top of the header text.

 

(note that preserve-3d and 3D effects doesn't work on Android, if your web project needs to work also on it)

 

Hope this helps !

Please use plain text.