I'm having an issue in Google Chrome on Windows only (tried IE11, FF, Opera, Safari) with printing. The issue only occurs when using the system print dialog. Using the Chrome Print Preview renders expected results, but it's just when using the system print dialog that I get the issue.
The first image below is the expected result (printed using the normal Chrome Print Preview window):
And this one is what I get (using the system print dialog):
I think it's pretty self explanatory what the issue is - all the text has a white highlight.
The other possibly related issue is that none of my fonts are correct - the PDF is rendering using Arial, instead of the correct fonts I've declared.
These were printed to a PDF printer, however the results are exactly the same when printed on paper, and I've tried two different manufacturers of printers.
I would post CSS (as I suspect that's the issue) but I'm not really sure what to post.
I've tried changing heaps of different CSS values from various elements (too many to name), but I've tried the obvious ones: background-colors and backgrounds, tried removing opacities etc.
Any ideas would be greatly appreciated!
Edit: A live URL with an example is at: iNewsletter
Edit: Just wrote a simple test case which also fails:
<!DOCTYPE html>
<html>
<head>
<style>
#bg {width: 500px; height: 500px;}
#text {margin-top: -500px;}
</style>
</head>
<body>
<div id="bg"><img src="http://inws-cache-dev.s3.amazonaws.com/3-resize-1024-768.jpg" width="500" height="500" /></div>
<div id="text">This text will have a white highlight</div>
</body>
</html>
Which leads me to think it's a Chrome bug
The problem is in your CSS like you guessed. Search for #media print in your CSS, that controls the printing style. The live site you provided, doesn't allow any print at all so you get a totally white document as it sets the print style display:none.
Related
This this the current design of my report:
When I run it on different browser except for Chrome, it's looks almost ok (I have no idea why the HTML render is different from the expected result):
But in Chrome, it's a different story. Tiny boxes appear out of nowhere. How do I get rid of it?:
It seems that the boxes are generated upon loading the page. It creates a gif image named "Blank.gif" here is the complete code when I entered 'Inspect Element':
<img src="/Reserved.ReportViewerWebControl.axd?Culture=1033&CultureOverrides=True&UICulture=1033&UICultureOverrides=True&ReportStack=1&ControlID=712a96453ecc4eb89b71439a5477d6c6&Mode=true&OpType=ReportImage&ResourceStreamID=Blank.gif"/>
I solved it by just creating a CSS style that finds img elements in the body that matches the source of that image element with "Blank.gif" and then hides it.
Here is my solution:
<style>
body:nth-of-type(1) img[src*="Blank.gif"]
{
display: none;
}
</style>
I had the same problem. I'd used lines in the report to create custom-shaped tables. Those lines were the problem.
I created my own table using rectangles instead of lines. And there are no more empty images.
I made a site that has an ordered list, for which some items on the list are links, and others are not. Everything renders fine on a PC. On my iPhone, however, the numbers in the ordered list show up smaller than they are supposed to if the list item is a link.
To make sure that it wasn't just some obscure issue with my particular html, css, etc., I made the following html document, called test_1.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>here.</li>
<li>here.</li>
</ol>
</body>
</html>
The issue persists even with this extremely minimal example.
Does anyone know how to fix this?
Thanks!
I stumbled onto a fix for this issue here. The solution was the following CSS code:
body {
-webkit-text-size-adjust: 100%;
}
Incidentally, this also fixed an issue with the site on my iPhone where one of the fonts on the page would not always load at its assigned size, but would seemingly randomly change sizes sometimes when I refreshed the page. E.g., it would sometimes load at its assigned font-size: 34px;, but other times load at e.g., 14px.
EDIT: we found what causes this problem and a solution. Read the choosen answer for more info.
Original question:
I'm experiencing this strange issue where the text is not rendering correctly for some words, displaying totally meaningless words or symbols instead of the words i put in the html, although inspecting the code all is how it should be, no errors in console, no problems of any kind (apparently).
First things first, the problem:
Here is how the text should be displayed on my page:
This is how it is displayed when refreshing:
When i zoom the page in or out it fixes itself until the next refresh.
I use a google web font ("Cabin" for anyone interested) but it seems to not be the issue since i tried different fonts with no luck.
I also include some third party javascript in the page (jquery.js, underscore.js, backbone.js, handlebars.js, foundation.js, jquery.cookie.js, i18next.js) and a bunch of proprietary js files.
I tried to disable them one by one and the problem goes away when i disable all of them.(conflict maybe?)
I tested the page on different pc/laptops in my office, tried locally and online, but the issue persist.
I read a question here on SO (can't find the link) where a user was having text rendering problems and fixed it wit CSS propriety -webkit-transform: translateZ(0); but looks like it's not my case.
For what is worth, here is my HTML:
<div class="footer-story full-width">
<div class="footer-story-row">
<h5>SUGGESTED</h5>
<div class="columns large-6">
<img src="http://lorempixel.com/120/120" alt=""/>
<div class="inline-top">
<h5>This is the title of the article</h5>
<p>by RandomUsername</p>
</div>
</div>
</div>
</div>
And the css involved (not everything):
.footer-story {
width: 100%;
max-width: 100%;
height: 400px;
background-color: gray;
padding-top: 15px;
}
.footer-story .footer-story-row h5 {
color: white;
border-bottom: 1px solid #ffffff;
}
.inline-top .footer-story .footer-story-row h5 {
border-bottom: 0px !important;
}
Now i have no idea how to look for a solution for this problem, because i can't see where the problem generates and can't reproduce it for you to see and play with.
I'm assuming it's a Chrome bug since everything works fine on Firefox, but i can't find anything similar anywhere, so i hope some of you can at least point me in the right direction to find a solution.
Thanks
I was able to fix this by using webfontloader to load Google Fonts.
Instead of:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500">
Use this:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:300,400,500']
}
});
</script>
See: https://github.com/typekit/webfontloader#get-started
Ok so we finally found what was wrong:
Foundation puts text-rendering:optimizeLegibility by default on all <h> and <p>.
Looks like this css property behaves really buggy with chrome, you can read more about the problem here:
Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?
https://code.google.com/p/chromium/issues/detail?id=39017
It looks different from the bug issued above, but it has the same behavior although in different circumstances.
From what we have experienced it happens when:
- you load a custom font from Google Web Fonts
- you load one or more JS files in your page
- you have set text-rendering:optimizeLegibility on text elements and there's an <a></a> inside OR wrapping the text element
it happens really random and it's not easy to reproduce.
The solution was just to set the SASS variables that use this property in Foundation to text-rendering:none !default; and everything went in his place.
Hope this helps.
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.
I've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.