Black box below select dropdown in chrome

Question

I am seeing the black box below select dropdown whenever i click select dropdown field first time after some movement in form (like displaying dynamic error message banner at the top of the form). This issue happened only in chrome.

I am using bootstrap + jquery in my front end.

Code:

<b:form-btn-group label="${siteLabel}" labelFor="sites" cssBody="col-sm-4" cssBtn="col-sm-1" button="addsite" buttonTxt="${addTxt}" cssClass="display-none required">
                <select id="sites" name="sites" class="form-control" disabled>
                    <option value=""></option>
                    <c:forEach items="${sites}" var="site">
                        <option value="${site.name}">${site.name}</option>
                    </c:forEach>
                </select>
            </b:form-btn-group>

http://jsfiddle.net/dJDHd/2060/

Answer 1

This issue appeared after I changed some settings in flags page. I disabled zero copy rasterizer in flags and that fized it. If you don't have zero copy rasterizer activated or you already disabled it, then you can also try disabling things related to GPU like HW accceleration...

Answer 2

Appears to be a problem with hardware acceleration. I had the same problem and it was very very annoying.

Instructions to effect solution found here: http://www.solveyourtech.com/turn-hardware-acceleration-google-chrome/

Answer obtained from this thread: https://askubuntu.com/questions/641098/blank-select-options-on-chrome-chromium-ubuntu-14-04

For whatever reason, this may fail depending on your chrome version. But it worked for me.