[
https://issues.apache.org/jira/browse/CB-5201?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13805042#comment-13805042
]
Vunda Von commented on CB-5201:
-------------------------------
Another example with images to show the tearing as you scroll:
{code}
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
*{
padding: 0;
margin: 0;
}
img{
max-width: 100%
}
#foo{
width: 100%;
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div>Header</div>
<ul id="foo">
</ul>
<div>Footer</div>
<script>
for(var i=0; i < 1000; i++){
var foo = document.createElement('li');
foo.innerHTML = i + ' <img
src="https://www.google.com/images/srpr/logo11w.png"/> ';
document.getElementById('foo').appendChild(foo);
}
</script>
</body>
</html>
{code}
> Scrolling produces artifacts on android
> ---------------------------------------
>
> Key: CB-5201
> URL: https://issues.apache.org/jira/browse/CB-5201
> Project: Apache Cordova
> Issue Type: Bug
> Components: Android
> Environment: Android Galaxy S4 Active, 4.2.2, Cordova 3.1 cli
> Reporter: Vunda Von
> Fix For: 3.1.0
>
>
> Real simple example here with a long list of items. As you scroll, you'll
> notice that the items are blank at either end you are scrolling towards. On
> a larger list with pictures and text, you can see so much tearing and
> "tiling" as you scroll. This does not happen in chrome web browser, only
> cordova apps.
> {code}
> <!DOCTYPE html>
> <html>
> <head>
> <title>Foo</title>
> </head>
> <body>
> <div>Header</div>
> <ul id="foo" style="height:300px; overflow:auto;">
> </ul>
> <div>Footer</div>
> <script>
> for(var i=0; i < 1000; i++){
> var foo = document.createElement('li');
> foo.innerHTML = i;
> document.getElementById('foo').appendChild(foo);
> }
> </script>
> </body>
> </html>
> {code}
--
This message was sent by Atlassian JIRA
(v6.1#6144)
![https://www.google.com/images/srpr/logo11w.png"/](https://www.google.com/images/srpr/logo11w.png"/){kind=link}