Flickable seems broken on Linux/X11 with mouse

jimav

I tried the example at https://doc.qt.io/qt-5/qml-qtquick-flickable.html#example-usage and it does not seem to work at all on a Linux/X11 desktop.

I can drag the viewport into the image somewhat (but not smoothly), but letting go of the mouse button makes the viewport "snap back" to its starting position. The behavior is nothing like "flicking".

Is Flickable only supposed to be used on touch-screens?

Here is the example code (modified slightly to use a wikimedia image):

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
  visible:true
  width:500; height:500

  Flickable {
    width: 1000; height: 1000
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Moon_merged_small.jpg" }
  }
}

Nikhilesh N

@jimav, it differs between computers and their computing power. Flicking also depends on the resolution of the image and its size. Try it out with a picture of a much lesser resolution. It'll turn out smoother.

Even I had a very slight problem with regards of smoothness while dragging such a big picture you used as your example here, but it used to go back to its origin smoothly without snapping back.

jimav

@Nikhilesh-N The problem is that it is impossible to reposition the viewport at all (it snaps back to 0,0 the moment you let go of the mouse button).

BTW, I'm running Ubuntu 18.10/X11 on a 6-core i7-8700K CPU @ 3.70GHz (albeit using built-in Intel graphics)

J.Hilk

@jimav
the issue is that image size (even sourceSize) is smaller than your 1000 x 1000 flickable, that's the reason why it jumps back.
You're technically out of bounds.

Why that's the case, I don't know :(

actually the reason is that you give your flickable a fixed height and width.
This fixes the issue:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
  visible:true
  width:500; height:500

  Flickable {
    anchors.fill: parent
    contentWidth: image.sourceSize.height; contentHeight: image.sourceSize.height

    onContentWidthChanged: console.log(contentWidth, image.sourceSize)

     Image { id: image; source: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Moon_merged_small.jpg" }

  }
}

no idea why that is causing havoc.