You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "Vunda Von (JIRA)" <ji...@apache.org> on 2013/10/25 07:08:32 UTC

[jira] [Commented] (CB-5201) Scrolling produces artifacts on android

    [ 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)