Weird rectangles on top of dashboard (on touch screen)

Hi folks,

I'm experimenting with the Node-RED dashboard on a small chinese LCD touch screen (attached to a Raspberry Pi Zero Wifi). It is working fine except from 1 problem: frequently white rectangles appear on top of my dashboard:

image

In this case:

  1. I enter numbers "21" via buttons that I show on my 'keypad' dashboard.
  2. Those numbers "21" are being displayed in the upper side of the screen.
  3. Then I (accidentally) touch the "1" (in the upper side of the screen), so the "1" become 'selected.
  4. From then on the large white rectangles appear whenever I touch the screen.

Since the dashboard is running on Chromium (on the RPI Zero), I could easily do remote debugging from my Windows portable. But in Chrome on my Windows portable I don't see the white artifacts (and at the same moment they are visible on the touch screen that I'm debugging...):

Since the number "1" is displayed inside the white rectangle, I assume that it is somehow related with that... So I changed the background color of the numbers paragraph yellow, but the rectangle still stays white. *** I get the impression that the grey selection rectangle (see around "1" in the emulator) somehow gets enlarged on the touch screen ...**** But I'm just guessing ...

To make sure the numbers cannot be selected, I added some CSS to that html paragraph:

/* See https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

That seems to work, but now I get white rectangles from time to time when I click the buttons...

Since I don't get problem in the emulator, I have no clue what might be causing this. Is it Chromium, is it AngularJs, is it the touchscreen, is it ...?

Does anybody can provide me some tips of things I could try? Because I cannot make the buttons 'unselectable' as you might understand ....

Getting nuts of this kind of problems :woozy_face: :woozy_face: :woozy_face:
Thanks !!!
Bart

Maybe you could try with a different browser (firefox ?) on the RPI Zero ?

Hi Jan,

Thanks!! That is indeed something I could use as a plan B, if everything else fails on Chromium.

  • I had seen on the www that white rectangle also appear in Chromium with gpu acceleration and some extensions (like e.g. Adblock). So I tried to start Chromium with some extra settings:

    DISPLAY=:0 chromium-browser --disable-gpu --disable-plugins ...
    

    However that didn't help...

  • Just found out that it happens in the following sequence:

    1. I enter a 4-digit code
    2. I click the "Activate" button, and then the new status "ON" is displayed in the upper right corner.
    3. By setting that new status text, it seems that sometimes a single character of that status text is selected. I don't know why.
    4. But in case such a character is selected in the status text, the white rectangle again appears (as soon as I click another element).

Therefore I have also applied the unselectable (see above) CSS style to the status text (just like I had already applied it to the keycode text):

image

I have been testing the keypad for a few minutes and it didn't fail anymore.
So hopefully it is now solved with the CSS class on both two fields at the top of my dashboard.
Fingers crossed :crossed_fingers:

1 Like