[SailfishDevel] SilicaWebView and scrolling problems

Wed May 6 04:02:04 UTC 2015

Hi,
i have encountered some unexpected behaviour in the SilicaWebView while
using divs with scroll.
The problem I encountered was when having a div positioned fixed (or
absolute) expanded to all the window (top = right = bottom = left = 0) with
overflow set to scrolled and an inner div with 100% width and bigger height
than the parent, scrolling is not allowed. A regular browser will display
scroll bars and let you scroll in the outer div. But, SilicaWebView doesn't
allow you to scroll.

The HTML of the test:

 <html>

    <head>

         <style>

         #container {

            position: fixed;

            top:0;

            right: 0;

            bottom: 0;

            left: 0;

            background-color: red;

            overflow: scroll;

            margin: 0;

            padding: 0;

         }

         #content {

            width: 100%;

            height: 3000px;

            display: block;

            background-color: blue;

            margin: 0;

            padding: 0;

         }

         </style>

    </head>

    <body>

         <div id='container'>

             <div id='content'> hi :) </div>

         </div>

    </body>

</html>

The qml of the page:

import QtQuick 2.0

import Sailfish.Silica 1.0

Page {

    id: page

    SilicaWebView {

        id: webView

        anchors.fill: parent

        url: "file:///usr/share/scroll-error/qml/pages/index.html"

        overridePageStackNavigation: true

        VerticalScrollDecorator {

            color: Theme.highlightColor

            width: Theme.paddingSmall

            flickable: webView

        }

        HorizontalScrollDecorator {

            parent: page

            color: Theme.highlightColor

            height: Theme.paddingSmall

            flickable: webView

            anchors.bottom: page.bottom

        }

     }

}

An example project is attached.

I encountered this problem while trying to do a Facebook Messenger for
SailfishOS [ https://github.com/NickCis/harbour-facebook-messenger ], my
idea es to embed the http://messenger.com web into a WebView and use some
experimental webview features to provide notifications.
I try to emulate the scrolling attaching to the touchstart, touchend and
touchmove eventos of javascript but the scroll ends up being too laggie.

Any help?

Thanks!
-- 
Nicolas Cisco
www.nckweb.com.ar
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20150506/0d853714/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: scroll-error.zip
Type: application/zip
Size: 10744 bytes
Desc: not available
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20150506/0d853714/attachment-0001.zip>