[SailfishDevel] SilicaWebView and scrolling problems

Nicolas Cisco ncis20 at gmail.com
Wed May 6 04:02:04 UTC 2015

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:




         #container {

            position: fixed;


            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;





         <div id='container'>

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




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?

Nicolas Cisco
-------------- 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>

More information about the Devel mailing list