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

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



    • 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:
    • Environment:
      Windows 10
      QT 5.13.0
    • Platform/s:


      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.


        No reviews matched the request. Check your Options in the drop-down menu of this sections header.



            lpotter Lorn Potter
            mjwinney Mark Winney
            1 Vote for this issue
            3 Start watching this issue



                Gerrit Reviews

                There are no open Gerrit changes