Languages

Menu
Sites
Language
CSS Animations block the App

Hello,

 

I am having problems with CSS Animations on my Web Application  for Tizen TV.

When I use a css scale animation in the page transition the app freezes, and sometimes shows a black page, while I navigate in my app.

If I remove it the behaviour is normal.

Anyone alse have a similar issue?

Is there a better way to do animations for Tizen TV web app?

 

Thanks in advance,

Best regards,

 

Bruno Costa

 

View Selected Answer
List

Responses

3 Replies
Nafisul Islam Kiron

Hello, please try this way for transitional animations.

<!DOCTYPE html>
<html>
    <head>
        <title>Tizen Tv</title>
        <style> 
.divAnim{
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
 }

.divAnim:hover {
   width: 500px;
}
</style>
    </head>
    <body id="cke_pastebin" >
        <div class="divAnim">
            <p>
                <span >freezes</span>
            </p>
            <h1>Hello</h1>
        </div>
    </body>
</html>

 

Links:

http://www.w3schools.com/css/css3_animations.asp

http://css3.bradshawenterprises.com/transitions/

Bruno Costa

Hello,

 

The actual problem were not the CSS Animations but the elements that are contained in the animated component.

As I have canvas elements in my application I added the "<tizen:setting accelerated-2d-canvas="disable"/>" setting in my config.xml file and the app starts to have the expected behaviour.

This property is in the Samsung Tizen documentation but has no explanation for it. If someone can explain me why I need to set this property to false I would apreciate that.

 

Thanks,

Bruno Costa

Mark as answer
Marco Buettner 
<tizen:setting accelerated-2d-canvas="disable"/>

means hardware accelerated for canvas by canvasGL

About canvasGL

http://www.dorothybrowser.com/portfolio/canvasgl/