Page blinking with android webview when scrolling down using the barebone example

aggressive-perfector commented 9 years ago

I'm making a hybrid android app.

I'm using iScroll to handle the scrolling, but there is a weird bug in Android webview.

When the page is first loaded, if I scroll down, the elements of the page start to blink until the bottom of the page is reached.

After that, if I scroll up to the top, the blinking is not reported again.

It seems that once the bottom has been reached, iScroll does a cache of the page or something like that, because as I said, the page stops flickering.

I made a video to show this behavior:

https://www.youtube.com/watch?v=kPuxdUZ6RQk

This is the page I'm testing with:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

        <style type="text/css">
            html {
              box-sizing: border-box;
            }
            *, *:before, *:after {
              box-sizing: inherit;
            }

            html{ font-size: 16px; }
            @media (min-width:480px){ html{font-size: 24px;} }
            @media (min-width:640px){html{ font-size: 32px; }}
            @media (min-width:800px){html{ font-size: 40px; }}

            html, body {
                width: 100%;
                height: 100%;

            }

            body {
                overflow: hidden;
            }

            .wrapper {
                position: relative;
                height: 100%;
                width: 100%;

                /*IScroll*/
                /* Prevent native touch events on Windows */
                -ms-touch-action: none;

                /* Prevent the callout on tap-hold and text selection */
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

                /* Prevent text resize on orientation change, useful for web-apps */
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                -ms-text-size-adjust: none;
                -o-text-size-adjust: none;
                text-size-adjust: none;

            }

            .scroller {
                position: absolute;
                /* Prevent elements to be highlighted on tap */
                -webkit-tap-highlight-color: rgba(0,0,0,0);

                /* Put the scroller into the HW Compositing layer right from the start */
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -ms-transform: translateZ(0);
                -o-transform: translateZ(0);
                transform: translateZ(0);

            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="scroller">
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls and  have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>
                <p>In addition, there are many other supernatural beings: Fenrir the gigantic wolf, and Jörmungandr the sea-serpent (or "worm") that is coiled around Midgard. These two monsters are described as the progeny of Loki, the trickster-god, and a giant (Hel is the third of these offspring). More benevolent creatures are Hugin and Munin (thought and memory, respectively), the two ravens who keep Odin, the chief god, apprised of what is happening on earth, since he gave his eye to the Well of Mimir in his quest for wisdom, Sleipnir, Loki's eight legged horse son belonging to Odin and Ratatosk, the squirrel which scampers in the branches of Yggdrasil.</p>
                <p>Along with many other polytheistic religions, this mythology lacks the good-evil dualism of the Middle Eastern tradition. Thus, Loki is not primarily an adversary of the gods, though he is often portrayed in the stories as the nemesis to the protagonist Thor, and the giants are not so much fundamentally evil, as rude, boisterous, and uncivilized (except in the case of the Thurses who were not quite so uncivilized). The dualism that exists is not good vs. evil, but order vs. chaos. The gods represent order and structure whereas the giants and the monsters represent chaos and disorder.</p>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls" and "demons" have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>

                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls and  have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>
                <p>In addition, there are many other supernatural beings: Fenrir the gigantic wolf, and Jörmungandr the sea-serpent (or "worm") that is coiled around Midgard. These two monsters are described as the progeny of Loki, the trickster-god, and a giant (Hel is the third of these offspring). More benevolent creatures are Hugin and Munin (thought and memory, respectively), the two ravens who keep Odin, the chief god, apprised of what is happening on earth, since he gave his eye to the Well of Mimir in his quest for wisdom, Sleipnir, Loki's eight legged horse son belonging to Odin and Ratatosk, the squirrel which scampers in the branches of Yggdrasil.</p>
                <p>Along with many other polytheistic religions, this mythology lacks the good-evil dualism of the Middle Eastern tradition. Thus, Loki is not primarily an adversary of the gods, though he is often portrayed in the stories as the nemesis to the protagonist Thor, and the giants are not so much fundamentally evil, as rude, boisterous, and uncivilized (except in the case of the Thurses who were not quite so uncivilized). The dualism that exists is not good vs. evil, but order vs. chaos. The gods represent order and structure whereas the giants and the monsters represent chaos and disorder.</p>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls" and "demons" have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>

                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls and  have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>
                <p>In addition, there are many other supernatural beings: Fenrir the gigantic wolf, and Jörmungandr the sea-serpent (or "worm") that is coiled around Midgard. These two monsters are described as the progeny of Loki, the trickster-god, and a giant (Hel is the third of these offspring). More benevolent creatures are Hugin and Munin (thought and memory, respectively), the two ravens who keep Odin, the chief god, apprised of what is happening on earth, since he gave his eye to the Well of Mimir in his quest for wisdom, Sleipnir, Loki's eight legged horse son belonging to Odin and Ratatosk, the squirrel which scampers in the branches of Yggdrasil.</p>
                <p>Along with many other polytheistic religions, this mythology lacks the good-evil dualism of the Middle Eastern tradition. Thus, Loki is not primarily an adversary of the gods, though he is often portrayed in the stories as the nemesis to the protagonist Thor, and the giants are not so much fundamentally evil, as rude, boisterous, and uncivilized (except in the case of the Thurses who were not quite so uncivilized). The dualism that exists is not good vs. evil, but order vs. chaos. The gods represent order and structure whereas the giants and the monsters represent chaos and disorder.</p>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls" and "demons" have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>

                <h1>Testing iScroll bug in Android webview</h1>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls and  have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>
                <p>In addition, there are many other supernatural beings: Fenrir the gigantic wolf, and Jörmungandr the sea-serpent (or "worm") that is coiled around Midgard. These two monsters are described as the progeny of Loki, the trickster-god, and a giant (Hel is the third of these offspring). More benevolent creatures are Hugin and Munin (thought and memory, respectively), the two ravens who keep Odin, the chief god, apprised of what is happening on earth, since he gave his eye to the Well of Mimir in his quest for wisdom, Sleipnir, Loki's eight legged horse son belonging to Odin and Ratatosk, the squirrel which scampers in the branches of Yggdrasil.</p>
                <p>Along with many other polytheistic religions, this mythology lacks the good-evil dualism of the Middle Eastern tradition. Thus, Loki is not primarily an adversary of the gods, though he is often portrayed in the stories as the nemesis to the protagonist Thor, and the giants are not so much fundamentally evil, as rude, boisterous, and uncivilized (except in the case of the Thurses who were not quite so uncivilized). The dualism that exists is not good vs. evil, but order vs. chaos. The gods represent order and structure whereas the giants and the monsters represent chaos and disorder.</p>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls" and "demons" have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>

                <h2>Long content</h2>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls and  have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>
                <p>In addition, there are many other supernatural beings: Fenrir the gigantic wolf, and Jörmungandr the sea-serpent (or "worm") that is coiled around Midgard. These two monsters are described as the progeny of Loki, the trickster-god, and a giant (Hel is the third of these offspring). More benevolent creatures are Hugin and Munin (thought and memory, respectively), the two ravens who keep Odin, the chief god, apprised of what is happening on earth, since he gave his eye to the Well of Mimir in his quest for wisdom, Sleipnir, Loki's eight legged horse son belonging to Odin and Ratatosk, the squirrel which scampers in the branches of Yggdrasil.</p>
                <p>Along with many other polytheistic religions, this mythology lacks the good-evil dualism of the Middle Eastern tradition. Thus, Loki is not primarily an adversary of the gods, though he is often portrayed in the stories as the nemesis to the protagonist Thor, and the giants are not so much fundamentally evil, as rude, boisterous, and uncivilized (except in the case of the Thurses who were not quite so uncivilized). The dualism that exists is not good vs. evil, but order vs. chaos. The gods represent order and structure whereas the giants and the monsters represent chaos and disorder.</p>
                <p>Generally, despite ambiguity, the Æsir and their allies represent the natural forces of cosmic order, whereas the Jötnar represent the natural forces of destructive chaos. The Jötnar compare to the Titans and Gigantes of Greek mythology and generally translated as "giants", although "trolls" and "demons" have been suggested as suitable alternatives. Notably, a foreboding figure like Loki was the child of two giants, and likewise Hel his daughter. Even so, the Æsir frequently intermarry the Jötnar, and themselves for the most part descend from them. Loki himself is thought to be the blood brother of Óðinn and thus counted as one of the Æsir. Some of the giants are mentioned by name in the Eddas, and they seem to be representations of natural forces. There are two general types of giant: Thurses and the normal thuggish giant, but there was also a giant made of stone and a giant made of fire. There were also elves and dwarfs, whose role is shadowy but who are generally thought to side with the gods.</p>

                <h3>Ending...</h3>

            </div>
        </div>
        <script type="text/javascript" src="js/libs/iscroll/iscroll.js"></script>
        <script type="text/javascript">
            (function() {
                setTimeout(function() {
                    new IScroll(document.querySelector(".wrapper"),
                        {
                            bounce: false
                        });
                }, 100);
            })();
        </script>

    </body>
</html>

This bug is not happening in the Android browser, only in the webview component.

I'm testing with Android 4.2.2 and 4.3.

If I enable the Software Acceleration, this problem only happens 10% of the times; but with this feature enabled, all my css transforms stop working smooth.

So I wonder if there is a way to avoid this problem without using the Software Acceleration. Maybe there is just something wrong with my css or the way I'm calling iScroll.

Thanks in advance.

kaansoral commented 9 years ago

Is this cordova + what do you refer by "enabling software acceleration" - usually the hardware acceleration is enabled by default

In any case, the android performance isn't enough to render a stupid scroller smoothly, you have to scroll slower for the devices to keep up

aggressive-perfector commented 9 years ago

Hi. I'm not using Cordova. I have an Android project with a single webview. This is how I enable the Software acceleration:

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

that line also disables the hardware acceleration.

Anyway, I don't know how to make a slow scroll, since every time i try a light scroll with my fingers, the scroll is made with the same fast speed.

aggressive-perfector commented 9 years ago

I forgot to add that if I disable the momentum, the blinking doesn't happen. But the great part of iscroll is the momentum, so I don't want to disable it.

aggressive-perfector commented 9 years ago

@kaansoral , is there a way to configure iscroll to decrease the scroll speed in mobile?

I tried with the deceleration option, but that doesn't work.

kaansoral commented 9 years ago

Yes, you can manually modify the code and reduce the speed, I did it months ago, so I don't remember the exact details

I have momentum, but I think I capped it

One other disturbing thing that happens is, the page slows down, than a small scroll move from user turns into a high speed scroll while it shouldn't, the scroll hits the bottom, so capping the speed/trigger was a good idea too

TL;DR: I can't help with the exact details, but at least it's possible

cubiq / iscroll

Page blinking with android webview when scrolling down using the barebone example #975