Bug 1564128 Comment 10 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Thanks! So the reason the images aren't shown is that the page has the images styled as "opacity:0", and they play a 1-second animation on pageload to fade them in.
```
.article .content img {
[...]
    opacity: 0;
    animation: fadeIn ease-in 1;
[...]
```

Firefox renders the page by cloning its document, with no animations and no scripting, and then printing that.  This means the page is stuck with the initial `opacity: 0` styling.

In a perfect world, perhaps our document-clone would use the instantaneous animated values of every animated CSS property for every element, at the moment the user chose to print.  But for now, that's not how our print pipeline works.

Probably the best way to address this is for Rackspace to include a print stylesheet (`@media print {...}`) which sets `opacity:1` on these elements to override the `opacity:0`.  But we'll keep this on our radar as something to look into fixing as well.
Thanks! So the reason the images aren't shown is that the page has the images styled as "opacity:0", and they play a 1-second animation on pageload to fade them in.
```
.article .content img {
[...]
    opacity: 0;
    animation: fadeIn ease-in 1;
[...]
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
```

Firefox renders the page by cloning its document, with no animations and no scripting, and then printing that.  This means the page is stuck with the initial `opacity: 0` styling.

In a perfect world, perhaps our document-clone would use the instantaneous animated values of every animated CSS property for every element, at the moment the user chose to print.  But for now, that's not how our print pipeline works.

Probably the best way to address this is for Rackspace to include a print stylesheet (`@media print {...}`) which sets `opacity:1` on these elements to override the `opacity:0`.  But we'll keep this on our radar as something to look into fixing as well.
Thanks! So the reason the images aren't shown is that the page has the images styled as "opacity:0", and they play a 1-second animation on pageload to fade them in.
```
.article .content img {
[...]
    opacity: 0;
    animation: fadeIn ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: .5s;
[...]
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
```

Firefox renders the page by cloning its document, with no animations and no scripting, and then printing that.  This means the page is stuck with the initial `opacity: 0` styling.

In a perfect world, perhaps our document-clone would use the instantaneous animated values of every animated CSS property for every element, at the moment the user chose to print.  But for now, that's not how our print pipeline works.

Probably the best way to address this is for Rackspace to include a print stylesheet (`@media print {...}`) which sets `opacity:1` on these elements to override the `opacity:0`.  But we'll keep this on our radar as something to look into fixing as well.

Back to Bug 1564128 Comment 10