I am the author of the PasswordCard web site. It has an image of a password card (a low tech way of generating passwords), which is supposed to be credit card sized, on it. The image is included on the page thusly:
<img src="/generatecard.do?number=756b9bb158f9564b&cookie=ok7q0sqrym26" style="width: 85.6mm; height: 53.98mm" alt="Picture of PasswordCard">
As you can see it has an absolute width and height in an attempt to show and print it at exactly credit card size. When I made this a couple of years ago, this worked; every browser printed it at exactly the right size. However now something appears to have changed. Both Firefox and Chrome now print this too large by something like 5% to 10%. Internet Explorer 8 still prints it at the correct size; I have not checked a newer version of IE and would not be surprised if IE11 or Edge also print it too large.
I can't figure out why this happens. I'm not setting any scaling options nor are any such options enabled in the printer settings. I have tried to research the problem but it's hard to google for. I haven't found any information about changes in CSS or something like that which would explain this. I have seen hints that Chrome's way of printing by rendering the page as a PDF first might cause problems like this, but it also occurs in Firefox, so it doesn't seem likely to be the problem. Also it usually causes things to be printed too small whereas in this case it is printed too large.
I'm in Europe so I'm printing on A4 paper.
My questions are:
What has changed in web browsers like Firefox and Chrome in the last couple of years that would explain this?
How can I force web browsers to print an image at a specific absolute size (disregarding any manual or explicit scaling by the user of course)?
Many thanks for any help you can give!
Related
I'll make this as short as I possible can.
I built a PWA. When clicking on the search icon it will slide to left - no problems.
I'm using a search feature which is containing "input search".
Every browser I have tested, the input group is not causing any issues for me.
When you go on safari on the other hand, you can click on the search icon the first time, and it will then display the search as normal. When you close it, no problems.. But click on it again, then close it again, you'll see that the website/viewport is pushed to the left. Test it on https://logima.io (on safari web browser) just to see the actual problem by hand.
I have tried relative, absolute, fixed and all sorts of box-sizing for different browsers.
I have spent 7 hours debugging the problem, and it definitely comes down to:
<input
ref="search"
id="search"
v-model="search"
#input="makeSearch"
class="search-panel-input"
:placeholder="$t('Type what you are looking for...')"
type="text"
autofocus="true"
>
But, it has nothing to do with the parameters which represents any styling or functions. It has solely to do with "input" itself.
I bought a brand new Macbook Air with 8GB Memory just 3 days ago and developer tools on safari is so slow I can not even use it at all, so I can't quickly debug the problem on developer tools there either which leads me here.
This can possibly be a result of another CSS code i've created causing this to clash. I am trying to figure out a way to make my viewport to not get pushed to left no matter what.
This is not the most critical issue as the search is displayed as I intend it to do on all browsers, on first time usage. But Safari is causing input to push viewport to left on second usage, and that is annoying yet an interesting issue to solve.
I will try myself to debug this styling issue but I'm reaching out here as I am positive there are some web designers more qualified than me to speak on styling in safari.
Any contributions to solving this issue is highly appreciated!
Oddly enough, it seems to be caused by the div(s) in your footer with class row.
So far, I've been able to address the issue by:
Setting margin-left/right to 0px (rather than -15px)
Disabling the values in Dev Tools
Removing the elements entirely from the DOM
(All done before opening the Search Panel)
I'm doing some browser testing with a responsive site, and ran into an issue with Safari that I cant track down the answer to. On the top of their page, they want a clickable phone number so that mobile devices and Skype users can easily call.
On every other browser it looks like it's supposed to:
The Right Way!
In safari, however, I get this:
The Wrong Way!
(rep is still too low to post pics, thus the Gdrive links)
What's going on here? Ive formatted the number portion to look as follows:
<h3 id="phone">Seattle <a id="ph-number" href="tel:2065272000">(206) 527-2000</a></h3>
The link works in every browser, it's just safari that's having issues with the display portion. Can anyone help me out with this (probably simple:) issue?
Adding as an answer for future searches:
Hard to tell from just the HTML unfortunately. Any way to shine some light on CSS? What font family are you using (it may be missing glyphs somehow)? Double-check font-size?
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
I have a web site page that doesn't seem to be rendering properly for chrome in safari.
It appears it is rendering the width of the screen with twice as many pixels as other browsers. I suspect it may be the initial viewport settings, which work in all other browsers for windows and apple, except for the version of chrome on mac.
I tried removing the viewport setting but that doesn't seem to work. I am using the latest version of Chrome, and if I have a window open in safari beside chrome you can see that chrome is rendering the screen as twice as wide, even though it takes up the same width.
Oops. I can't post an image, but you can see it here: http://straathof.acadnet.ca/test_chrome.jpg
If you would like to test it, you can visit the page here: http://straathof.acadnet.ca/reblend55
Any help for tracking down this problem would be appreciated. I have no idea where to look.
control-0 removed any zooms that had been added to the web page, which allowed it to render properly at the correct width. Apparently some months ago I zoomed in on something and, even though Chrome was removed reinstalled and reset, not to mention quit and restarted a whole lot of times, it still remembered that errant zoom value.
annoying, but answered with someone elses suggestion.
Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...