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

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

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Need More Info
    • Priority: P3: Somewhat important
    • Resolution: Incomplete
    • Affects Version/s: 5.13.0
    • Fix Version/s: None
    • Component/s: GUI: Painting
    • Labels:
      None
    • Environment:
      Windows 10
      QT 5.13.0
      emscripten-1.38.30
    • Platform/s:
      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
          canvas_wblackbar.jpg
          30 kB
        2. ExampleApp.zip
          1 kB
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

            • Assignee:
              lpotter Lorn Potter
              Reporter:
              mjwinney Mark Winney
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Gerrit Reviews

                There are no open Gerrit changes