File upload filename text overflows only during Selenium Webdriver session, blocking the upload button

Question

During testing with Selenium + Chrome + Webdriver the filename chosen in a file input field overlaps the edge of the field, and covers the upload button so it cannot be clicked on.

The error I get in testing is valid and correct, as I cannot click on the button manually either:

Exception in thread "main" org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <button type="submit" id="article-file-upload-submit" class="ui primary button">...</button> is not clickable at point (427, 451). Other element would receive the click: <input type="file" name="import" id="article-file-upload-file" class="ui button" required="" data-qa-tag="project-file-import">

Why would viewing a page in a webdriver session change the rendering of a field?

This is what it normally looks like in Chrome:

This is what it looks like during testing in Chrome via webdriver:

(they are the same size in real life)

I am loading the same page here, in the same browser version, logged in as the same user, inside the same project and uploading the same file. The only difference I can see is the "bad one" is launched from Java, Selenium, Webdriver, from a VS Code project. So it is a different process.

Chrome Version 86.0.4240.80 (Official Build) (x86_64)

chromedriver v86

Mac OSX

The browser window isn't any narrower, (responsiveness doesn't affect this element).

I'm using the latest Semantic UI v2, the field is inside an accordion inside a segment, but in 2 years of dev evolution, I've never seen this overflow problem.

    <div class="ui input">
        <input type="file" name="import" id="article-file-upload-file" class="ui button" required>
    </div>
    <button type="submit" id="article-file-upload-submit" class="ui primary button">
        <i class="icon upload"></i> UPLOAD
    </button>

Answer 1

Click using javascript should work:

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver; 
String script = "document.getElementById('article-file-upload-submit').click();";
javascriptExecutor.executeScript(script);

Answer 2

It turned out that the overlap issue was just a CSS bug in my latest app version, but for some reason it only showed up in the new web driver Chrome session.

A while later it showed up in the other Chrome window, so it was probably just a CSS caching issue. I've not seen this before though, as I am using a automated Gulp build with Browsersync which normally keeps everything up to date.

So it's nothing to do with webdriver, and in fact the test was finding a true bug, so it's good that it failed!