Transient spec failure in spec/features/protected_branches_spec.rb

As seen in https://gitlab.com/gitlab-org/gitlab-ee/-/jobs/21082082:

  1) Protected Branches access control prepends selected users that can merge to
     Failure/Error: find(".js-allowed-to-#{git_operation}").click # close

     Capybara::Poltergeist::MouseEventFailed:
       Firing a click at co-ordinates [633.5, 112] failed. Poltergeist detected another element with CSS selector 'html body header.navbar.navbar-gitlab.with-horizontal-nav div.container-fluid div.header-content div.navbar-collapse.collapse' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').
     Shared Example Group: "protected branches > access control > EE" called from ./spec/features/protected_branches_spec.rb:105
     # ./spec/support/shared_examples/features/protected_branches_access_control_ee.rb:110:in `block (4 levels) in <top (required)>'
     # ./spec/support/shared_examples/features/protected_branches_access_control_ee.rb:98:in `block (3 levels) in <top (required)>'
     # ./spec/spec_helper.rb:97:in `block (2 levels) in <top (required)>'
     # ------------------
     # --- Caused by: ---
     # Capybara::Poltergeist::BrowserError:
     #   There was an error inside the PhantomJS portion of Poltergeist. If this is the error returned, and not the cause of a more detailed error response, this is probably a bug, so please report it. 
     #   
     #   Poltergeist.MouseEventFailed: click
     #   html body header.navbar.navbar-gitlab.with-horizontal-nav div.container-fluid div.header-content div.navbar-collapse.collapse
     #   {"x"=>633.5, "y"=>112}
     #   ./spec/support/shared_examples/features/protected_branches_access_control_ee.rb:110:in `block (4 levels) in <top (required)>'

  2) Protected Branches access control prepends selected users that can push to
     Failure/Error: find(".dropdown-input-field").set(users.last.name) # Find a user that is not loaded

     Capybara::ElementNotFound:
       Unable to find css ".dropdown-input-field"
     Shared Example Group: "protected branches > access control > EE" called from ./spec/features/protected_branches_spec.rb:105
     # ./spec/support/shared_examples/features/protected_branches_access_control_ee.rb:100:in `block (4 levels) in <top (required)>'
     # ./spec/support/shared_examples/features/protected_branches_access_control_ee.rb:98:in `block (3 levels) in <top (required)>'
     # ./spec/spec_helper.rb:97:in `block (2 levels) in <top (required)>'

Finished in 45 minutes 21 seconds (files took 17.63 seconds to load)
1586 examples, 2 failures, 11 pending

Failed examples:

rspec './spec/features/protected_branches_spec.rb[1:3:4]' # Protected Branches access control prepends selected users that can merge to
rspec './spec/features/protected_branches_spec.rb[1:3:8]' # Protected Branches access control prepends selected users that can push to

This can be reproduced pretty easily locally, but I don't understand the error message which states that the top nav bar could overlap the drop-down. I've tried to debug this by coloring the two elements (nav bar in blue, dropdown in green), they're clearly not overlapping (this is a screenshot from a local failed example):

assigned to @rymai

changed milestone to %9.4

mentioned in merge request !2340 (closed)

mentioned in merge request !2280 (merged)

closed via commit 9f72556d

mentioned in commit 9f72556d

mentioned in issue #2788 (closed)

This occurs still in https://gitlab.com/gitlab-org/gitlab-ee/pipelines/9884407/failures and https://gitlab.com/gitlab-org/gitlab-ee/-/jobs/22530297 on stable, although I think on line 115 instead of line 100

a lot of these types of bugs should be fixed with gitlab-org/gitlab-ce#30876 since Chrome has more accurate page layout rendering. I'm guessing this is an issue with flexbox in PhantomJS.