Bootstrap shows black rectangles when printing focused input elements

Question

If an input element is focused, Chrome will most of the time print a black square. If the same element is not focused, all is always fine.

Focused element / Print Preview

---

Unfocused element / Print Preview

---

I tried removing/resetting CSS styles on the element, but nothing works, and I'm not sure how to fix this. Can someone help?

** Edit **

The following snippet reproduces the problem; just run it and press CTRL+P. Most of the time, you should get a black rectangle if either field is selected.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
</form>

Answer 1

For the answer by disabling transitions.

Here's the CSS, for anyone interested.

@media print {

   .form-control {
     -webkit-transition: none !important;
          -o-transition: none !important;
             transition: none !important;
   }

}