CSS Animations Causing App Freezes on Tizen TV Web Application

Original Created Jun 04, 2016 | Regeneration Apr 22, 2026

Question

I'm experiencing issues with CSS animations in my Tizen TV web application. When using a CSS scale animation for page transitions, the app freezes and sometimes displays a black screen during navigation. Removing the animation resolves this issue.

Has anyone encountered similar problems? Are there better approaches for implementing animations in Tizen TV web applications?

Answer

Problem Understanding

The freezing issue occurs specifically when using CSS scale animations during page transitions in a Tizen TV web application. The problem appears to be related to hardware acceleration conflicts, particularly when canvas elements are involved.

Solution Methods

Disable Hardware Acceleration for Canvas:
- Add the following setting to your config.xml file:
```
<tizen:setting accelerated-2d-canvas="disable"/>
```
- This disables hardware acceleration for 2D canvas elements, which can resolve conflicts with CSS animations.

Alternative Animation Approach:

Consider using CSS transitions instead of animations for smoother performance:

.transition-element {
    transition: transform 0.3s ease;
}
.transition-element:hover {
    transform: scale(1.1);
}

Optimize Animation Performance:
- Use will-change property to hint the browser about upcoming animations:
```
.animated-element {
    will-change: transform;
}
```

Code Examples

Here's a complete example using CSS transitions:

<!DOCTYPE html>
<html>
<head>
    <title>Tizen TV Animation Example</title>
    <style>
        .page {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease;
        }
        .page.scale {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <div class="page">
        <!-- Your page content here -->
    </div>
    
    <script>
        // Example of triggering animation
        document.querySelector('.page').classList.add('scale');
    </script>
</body>
</html>

Additional Tips

Test animations on actual Tizen TV hardware as emulator performance may differ
Keep animations simple and avoid complex transformations
Consider using the Web Animations API as an alternative to CSS animations
Monitor memory usage when implementing animations in resource-constrained environments