<div dir="ltr">Hi,<div>i have encountered some unexpected behaviour in the SilicaWebView while using divs with scroll.</div><div>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.</div><div><br></div><div>The HTML of the test:</div>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,128,0)"><html></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)"><head></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)"><style></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="font-weight:600;color:rgb(0,0,128)">#container</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,128,0)">{</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">position:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">fixed</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">top:</span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">right:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">bottom:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">left:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">background-color:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">red</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">overflow:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">scroll</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">margin:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">padding:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)">}</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="font-weight:600;color:rgb(0,0,128)">#content</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,128,0)">{</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">width:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">100%</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">height:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">3000px</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">display:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">block</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">background-color:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">blue</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">margin:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">padding:</span><span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,0,128)">0</span><span style="color:rgb(128,128,0)">;</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)">}</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)"></style></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)"></head></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)"><body></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)"><div</span><span style="color:rgb(192,192,192)"> </span><span style="font-family:monospace;font-size:9pt;color:rgb(0,0,0)">id=</span><span style="color:rgb(170,0,0)">'container'</span><span style="color:rgb(128,128,0)">></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">             </span><span style="color:rgb(128,128,0)"><div</span><span style="color:rgb(192,192,192)"> </span><span style="font-family:monospace;font-size:9pt;color:rgb(0,0,0)">id=</span><span style="color:rgb(170,0,0)">'content'</span><span style="color:rgb(128,128,0)">></span><span style="color:rgb(192,192,192)"> </span>hi<span style="color:rgb(192,192,192)"> </span>:)<span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,128,0)"></div></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">         </span><span style="color:rgb(128,128,0)"></div></span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)"></body></span></pre>
<div><span style="color:rgb(128,128,0)"></html></span></div><div><br></div><div>The qml of the page:</div>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(128,128,0)">import</span><span style="color:rgb(192,192,192)"> </span>QtQuick<span style="color:rgb(192,192,192)"> </span>2.0</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(128,128,0)">import</span><span style="color:rgb(192,192,192)"> </span>Sailfish.Silica<span style="color:rgb(192,192,192)"> </span>1.0</pre>
<pre style="margin-top:0px;margin-bottom:0px"><br></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(128,0,128)">Page</span><span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,0,0)">id</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">page</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span>SilicaWebView<span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,0)">id</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">webView</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,0)">anchors.fill</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">parent</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,0)">url</span>:<span style="color:rgb(192,192,192)"> </span>"file:///usr/share/scroll-error/qml/pages/index.html"</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,0)">overridePageStackNavigation</span>:<span style="color:rgb(192,192,192)"> </span>true</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><br></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,128)">VerticalScrollDecorator</span><span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">color</span>:<span style="color:rgb(192,192,192)"> </span>Theme.highlightColor</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">width</span>:<span style="color:rgb(192,192,192)"> </span>Theme.paddingSmall</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">flickable</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">webView</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span>}</pre>
<pre style="margin-top:0px;margin-bottom:0px"><br></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,0,128)">HorizontalScrollDecorator</span><span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">parent</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">page</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">color</span>:<span style="color:rgb(192,192,192)"> </span>Theme.highlightColor</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">height</span>:<span style="color:rgb(192,192,192)"> </span>Theme.paddingSmall</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">flickable</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">webView</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,0,0)">anchors.bottom</span>:<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(0,0,0)">page</span>.bottom</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span>}</pre><pre style="margin-top:0px;margin-bottom:0px">     }</pre>
<div>} </div><div><div><br></div><div>An example project is attached.</div><div><br></div><div>I encountered this problem while trying to do a Facebook Messenger for SailfishOS [ <a href="https://github.com/NickCis/harbour-facebook-messenger">https://github.com/NickCis/harbour-facebook-messenger</a> ], my idea es to embed the <a href="http://messenger.com">http://messenger.com</a> web into a WebView and use some experimental webview features to provide notifications.</div><div>I try to emulate the scrolling attaching to the touchstart, touchend and touchmove eventos of javascript but the scroll ends up being too laggie.</div><div><br></div><div>Any help?</div><div><br></div><div>Thanks!</div>-- <br><div class="gmail_signature">Nicolas Cisco<br><a href="http://www.nckweb.com.ar" target="_blank">www.nckweb.com.ar</a><br></div>
</div></div>