css - Bootstrap shows black rectangles when printing focused input elements -

if input element focused, chrome of time print black square. if same element not focused, always fine.

focused element / print preview

---

unfocused element / print preview

---

i tried removing/resetting css styles on element, nothing works, , i'm not sure how fix this. can help?

** edit **

the following snippet reproduces problem; run , press ctrl+p. of time, should black rectangle if either field 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>

for answer disabling transitions.

here's css, interested.

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