Border with border-radius specified refusing to print in Opera? - printing

I'm not certain if this is something I'm doing wrong or if it's just a bug in the way Opera handles printing, but here's my problem:
I print reports for my company that are written in PHP and include a simple stylesheet (with alternatives for screen and print media).
Everything seems to work fine, the report displays on the screen correctly and the printed version is almost perfect. The issue I'm having is that I'm using a div to encapsulate data tables, and the div has a border with a radius to make it look not-so-blockish. When I go to print (via print-to-pdf or directly printing to the printer) the border around the div will not print. The table borders work fine, but not the div.
I discovered that if I included in the printed media an exclusion on the radius then it prints fine (but not as pretty). It should be noted that on Chrome the div border prints fine regardless.
So.. anyone have any ideas? I'm stumped.

Related

Text is appearing blurry as you get further into the report

We have some reports generated with JasperReports 6.2.0 that have this bizarre affect where as you get further into pages of the report the text gets more blurry as you go. The first page or two is crisp text, but get to page 30 or so and it becomes unreadable. In our scenario we are printing checks, so I can only post close up shots of some text. But the first image is the first page, and the second image is about page 28. Notice the difference.
We have two font extensions set up with Calibri and MICR fonts, They are added correctly and have the pdfEncoding set to Cp1250 and pdfEmbedded to true (I have tried other values).
How can we make the text not become blurry? Thanks
UPDATE: I am removing Jasper Reports from the equation/cause of the issue. And believe it might be in the component PDF.js that we are using that renders the PDF into the print preview.

Why doesn't the input[type=range] work after CSS3 transform?

Must use the JSFiddle on iOS to see issue :)
Developing an iOS web app, and have multi panels which are translated -480px on click (by adding a class with JQuery).
When I use -webkit-transform: translate: (480px,0); on the first navigation button, everything is fine except the input[type=range] becomes unresponsive.
I originally had this: http://jsfiddle.net/b4ung/2/
And later I added -webkit-perspective: 1; to the body. This fixed on Safari but not on iOS: http://jsfiddle.net/RLywz/2/embedded/result/
Can someone please tell me how to get the range function to work on iOS, and why it doesn't register after the translation?
Just for further note, if I change the transform to "left: -480px" the range works, but then becomes blocky when animating.
Any light would be tops, as its quite annoying (and if its a bug can someone file it 'cause I'm not a developer)
Edited to make the problem more clear, and show updated JSFiddle
I had the same problem, and I was able to hack it by setting the panel's css property to translate(0,0) when it needs to have the range working.
In order to have the animation/position right, I wrapped the element with a div and set the x position as needed and shifted the panel's translate property when the range doesn't need to be active. Hope it works in your structure.

sIFR text getting stretched vertically in IE9

I've got a site that's using sIFR, and some of the replaced text is being stretched vertically in IE9. It's only happening in places where the text wraps 2 lines, and it fixes itself when I hover my cursor over it. The sIFR text is a link, but I'm not sure if that has any correlation.
I've tried various settings changes like fitExactly, forceClear, and forceSingleLine (though I want it to be able to wrap), and those didn't work. I've tried changing the font-size, line-height, and all other dimensions to px instead of em. innerHTML isn't being used anywhere on the page. It's frustrating that it works after being hovered on, but not before.
And I know you're probably thinking "use cufon or #font-face, dummy" but I'm stuck with sIFR for now. The client wants what the client wants...
I've found a solution,
if you try to hover with mouse cursor the text will display correct so..
I write few line of code to put in sifr-config.js
forcing flash reset "onReplacemment" callback only when IE9 is detected
you must use Jquery for browser detection or use another javascript way
see the link below:
http://www.voo-doo.net/robotphobia/2011/05/fix-sifr-ie9

Transparency and SF beta 4

I'm implementing sirf in a site using a Drupal module. I have a few issues...
During testing the text fails in Safari 4 beta (win) and renders with a green background when transparency is applied. No doubt a Safari or plug in issue. There are a few crap things happening, the Lightbox overlay fails to cover any Flash objects. I'm sure you guys are tracking that error.
Exported fonts using Flash CS4 don't work. Got no idea why, I reverted to using one of the online conversion sites. I think the FLA is CS3. Maybe this could be updated.
Transparency failing in Safari 4 / Windows in definitely a Safari bug.
Which sIFR version are you using? The sIFR 2 movie is available in a CS 3 format, I do think the sIFR 3 movie is Flash 8.
sIRF3 and not working with Flash CS4 (for editing)
I've got some issues with headings not being drawn on the initial page load. Like the heading aren't draw in html before sIRF starts up and nothing then appears.
And another where jQuery created drop shadows draw before the sIRF text then when the page shifts they are in the wrong location.
I've mutated the call to this...
$('document').ready(function(){
$('.image-thumbnail img').ready(function(){
setTimeout( "drawShadow();", 4000) //slow it down to give objects a chance to draw
});
});
function drawShadow(){
$('.image-thumbnail').dropShadow({left:2, top:2, blur:2, opacity:0.5}); // Creates new drop shadows
}
What I really need is a signal that sIRF has completed. Any clue how I might do that?

fitExactly not working in r-436

I just recently upgraded to 436 from 419, and have found that fitExactly will no longer have any effect.
You can see an example here:
(With 419)
(With 436)
The javascript config is in the page head.
I checked the versions in between, and the latest it works with is 419.
I could adjust the width in the Javascript configuration, but then there would be a gap left on the side of the dropcap I'm using it on, and the fact that I'm integrating it with a Wordpress theme that automatically applies sifr (other than the one in the example), meaning that each can't be adjusted by changing the width or font size.
I would much prefer to use 436, especially due to there being less page shifting, so, is there a remedy?
Thanks for your time.
If you compare the width and height of the Flash movie on both pages, you'll see that it's the same. In other words, it looks like fitExactly works fine. I wouldn't know though why Flash is clipping the rendered text.
Just to test, could you open the r436 JavaScript file, search for '419' and replace by '436', and then use the r419 Flash movie? Perhaps that provides further clues.

Resources