Ghosting effect when using transparent background with wayland

Description

What MCU/Processor/Board and compiler are you using?

RK356x

What LVGL version are you using?

9.2
Started from GitHub - EDGEMTech/lv_benchmark

What do you want to achieve?

I want to create an OSD application with wayland/weston as a backend

What have you tried so far?

I looked the documentations and started from scratch the application stating from the lv_example_style_11.c

I compile the example also on the fbdev directly.

Code to reproduce

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMAGE

/**
 * Using multiple styles
 */

static lv_style_t style_base;
static lv_style_t style_warning;
static lv_obj_t * obj_warning = NULL;

static void event_handler_close_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    switch(code) {
        case LV_EVENT_CLICKED:
            lv_obj_set_style_bg_opa(lv_screen_active(), LV_OPA_COVER, LV_PART_MAIN);
            lv_obj_set_style_bg_opa(lv_layer_bottom(), LV_OPA_COVER, LV_PART_MAIN);
            lv_obj_set_style_opa(lv_screen_active(), LV_OPA_COVER, LV_PART_MAIN);
            
            lv_obj_clear_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
            lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_TRANSP, LV_PART_MAIN);
            lv_obj_set_style_opa(lv_layer_top(), LV_OPA_0, LV_PART_MAIN);
            break;
            
        default:
            break;
    }
}

static void event_handler_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    switch(code) {
        case LV_EVENT_CLICKED:
            if ( obj_warning == NULL )
            {
                lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_TRANSP, LV_PART_MAIN);
                lv_obj_set_style_bg_opa(lv_screen_active(), LV_OPA_TRANSP, LV_PART_MAIN);
                lv_obj_set_style_bg_opa(lv_layer_bottom(), LV_OPA_TRANSP, LV_PART_MAIN);
                lv_obj_set_style_opa(lv_screen_active(), LV_OPA_0, LV_PART_MAIN);
                lv_display_set_color_format(NULL, LV_COLOR_FORMAT_ARGB8888);
                
                lv_obj_add_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
                /*Create another object with the base style and earnings style too*/
                obj_warning = lv_obj_create(lv_layer_top());
                lv_obj_add_style(obj_warning, &style_base, 0);
                lv_obj_add_style(obj_warning, &style_warning, 0);
                lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
                lv_obj_add_event_cb(obj_warning, event_handler_close_cb, LV_EVENT_ALL, NULL);

                lv_obj_t * label = lv_label_create(obj_warning);
                lv_label_set_text(label, "Close");
                lv_obj_center(label);
            }
            break;
            
        default:
            break;
    }
}

void lv_example_style_11(void)
{
    /*A base style*/
    lv_style_init(&style_base);
    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
    lv_style_set_border_width(&style_base, 2);
    lv_style_set_radius(&style_base, 10);
    lv_style_set_shadow_width(&style_base, 10);
    lv_style_set_shadow_offset_y(&style_base, 5);
    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
    lv_style_set_text_color(&style_base, lv_color_white());
    lv_style_set_width(&style_base, 100);
    lv_style_set_height(&style_base, LV_SIZE_CONTENT);

    /*Set only the properties that should be different*/
    lv_style_init(&style_warning);
    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));

    /*Create an object with the base style only*/
    lv_obj_t * obj_base = lv_obj_create(lv_screen_active());
    lv_obj_add_style(obj_base, &style_base, 0);
    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
    lv_obj_add_event_cb(obj_base, event_handler_cb, LV_EVENT_ALL, NULL);

    lv_obj_t * label = lv_label_create(obj_base);
    lv_label_set_text(label, "Play");
    lv_obj_center(label);
}

#endif

Screenshot and/or video

Result with fbdev

Result with wayland

As reported on your documentation, I used the top layer to create a button on a transparent background, but the “close” button is showed multiple times, like the framebuffer isn’t cleared before a refresh.

There is a ghosting effect also on the performance monitor.

I’m missing something or there is something to improve in the lv_wayland.c?
Thank you in advance.

PS: I forced the compilation process to use the wayland-protocols from 1.24 and not only from 1.25. For my undestand, the only difference between these version is the bounds parameter, that the lv_wayland.c isn’t using at the moment.