"ghost pixels" due to select_advanced field in frontend submission form

Hi,

I have a frontend submission form including a metabox with a taxonomy field.

array(
    'name'       => 'Taxonomy',
    'id'         => 'taxonomy',
    'type'       => 'taxonomy',

    // Taxonomy slug.
    'taxonomy'   => 'category',

    // How to show taxonomy.
    'field_type' => 'select_advanced',
),

When loading the form in the frontend I get a lot of "empty" space underneath the form, which in the design of our website is causing a bit of a problem (see attached img).

https://drive.google.com/file/d/16kEd4iMLsR5tcSiQp5qHqIAbE6kdcaQU/view?usp=sharing

Upon further inspection I noticed that the select field has the following css attached to it's class:

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

It seems that the "height: 1px !important;" in combination with the "position: absolute !important;" causes "ghost pixels" that accumulate at the end of the html document. What would you recommend for me to do to solve this issue?

Cheers and thanks in advance.

Tako