Bootstrap shows black rectangles when printing focused input elements


Tags: css,twitter-bootstrap,google-chrome,printing,webkit

Problem :

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

enter image description here


enter image description here

Unfocused element / Print Preview

enter image description here


enter image description here

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>



Solution :

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;
   }

}

    CSS Howto..

    How to make image clickable if -1 z-index is given to create box-shadow?

    howto hide outline on a form

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    How to always refresh file loaded by ajax, avoiding cached file

    How do I style the Nivo Slider thumbnails?

    How to addClass with css3 Animation?

    How to reload a css background-image inside a directive

    How can I stop my CMS’s CSS affecting my content?

    How to get a gravity effect in a CSS animation?

    How can i change background image opacity without changing on div content? [duplicate]

    div how to make its dimensions exactly as those of the contents

    How can I select second element and after that in CSS?

    CSS radio button border how to remove it?

    How to hide a parent div if an inner div has a certain class, with javascript

    how to set a radio button state to checked with css?

    How to add an informative popup over a given text

    How to place kartik typeahead above text input

    How to Layout a Watermark Image that is transparent along with a banner image and content div?

    How to make left menus height dynamic

    How to properly adjust CSS Form Select field if content is larger than image

    how to isolate firefox 17 rendering bug [closed]

    How to make horizontal lines with words in the middle using CSS?

    How to change active link color in navigation bar

    How do I center a table?

    How to simulate nonstoparagraphing in HTML/CSS?

    Pure CSS3 slideshow repeats the last 4 slides?

    CSS: how to put one image and one block with two

    in one line not using float

    How to display the bottom of an image?

    How to create shapes in css? [closed]

    How to Align CSS form