Horizontal Scroll Issue in Tizen Web Application

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

Question

I'm developing a web application for Tizen that requires horizontal scrolling functionality. I've implemented this using jQuery with the following setup:

JavaScript Libraries:

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

CSS Files:

<link rel="stylesheet" type="text/css" href="css/w3.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

Viewport Meta Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

The horizontal scrolling works perfectly in Chrome and Firefox browsers, but I'm experiencing issues on Tizen devices. Specifically:

There are unexpected extra spaces when scrolling left
These spaces appear even when there's no content present

I've attached a screenshot showing how it appears on Tizen devices. Could anyone help me resolve this issue?

Answer

Problem Understanding

The issue appears to be related to how Tizen's web engine handles horizontal scrolling compared to desktop browsers. The extra spaces during scrolling might be caused by:

Viewport configuration differences
jQuery Mobile's touch event handling on Tizen
CSS overflow properties not being properly interpreted

Solution Methods

Viewport Configuration Adjustment: Try modifying your viewport meta tag to:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

CSS Overflow Properties: Add these CSS rules to your scrolling container:

.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

jQuery Mobile Alternative: Consider using native JavaScript scrolling or a lightweight library like iScroll for better Tizen compatibility.

Code Examples

Here's a complete implementation example:

<div class="scroll-container">
    <!-- Your horizontally scrollable content here -->
</div>

<style>
.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
}
.scroll-item {
    display: inline-block;
    width: 300px;
    height: 200px;
    margin-right: 10px;
}
</style>

Additional Tips

Test your application on the Tizen emulator with different screen sizes
Consider using Tizen's native scroll APIs if web scrolling continues to be problematic
Check for any console errors that might indicate JavaScript compatibility issues