Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-78457

QT webassembly issue drawing to canvas where boundingClientRect has negative Y coordinate

    XMLWordPrintable

Details

    • Bug
    • Resolution: Incomplete
    • P3: Somewhat important
    • None
    • 5.13.0
    • GUI: Painting
    • None
    • Windows 10
      QT 5.13.0
      emscripten-1.38.30
    • WebAssembly

    Description

      The following is write up of bug details concerning the drawing to canvas within browser where the Y coordinate of the canvas has been scrolled above the visible area on the browser and hence the boundingClientRect has negative 'y' coordinate.

      A black bar shows at the top of the canvas. See attached screenshot.

      Steps to reproduce:

      1. Create a web page with a canvas.
      2. Canvas has min size is limited to 1024 x 768 so that when browser window size is reduced the vertical scroll is displayed and you can scroll the canvas up and down.
      3. Create a QT application that redraws the canvas when the browser is resized and build as WebAssembly. Example is attached.
      4. We are using Angular but you need to create a webpage where the canvas can be scrolled up and down when the browser size is reduced to less than 1024x768.
      5. Drag the scroll bar down....moving the canvas up so that the top of the canvas is outside the visible browser client area. If you use Chrome Developer tools you can apply a live expression to the canvas element 'querySelector('#vizcanvas').getBoundingClientRect()' and see the coordinates of the canvas as you scroll and when 'y' goes negative, grab the browser and resize by a couple of pixel, to force a redraw of the canvas.
      6. Notice how the redraw will not draw to the entire canvas and only draws at coordinates that are zero and above. This leaves a black bar (when you scroll top of canvas back into view) in the area outside the browser client area...which is the area that was negative 'y'

      I did write the same in javascript, drawing the same to canvas and causing a redraw during resize and it does not experience the problem.

      Our application is written in Angular (and loads the webassembly) and I cannot provide this to you, but if you need an HTML example please let me know and we can put together an example.

      Attachments

        1. canvas_wblackbar.jpg
          30 kB
          Mark Winney
        2. ExampleApp.zip
          1 kB
          Mark Winney
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            lpotter Lorn Potter
            mjwinney Mark Winney
            Votes:
            1 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes