I have the following 2in x 1in barcode I am creating (Must be these dimensions). If the name is too long I want it to overflow:hidden. This works great in Firefox, but in Chrome it does not (See screenshots). I am guessing it has something to do with my CSS. I also verified both browsers are at default zoom.
Firefox:
Chrome:
Working demo:
http://blastohosting.com/barcode_overflow/
As you can tell in Chrome, you can see part of the words at the bottom not completely hidden.
This has to do with the rounding of the font-size.
Use an interger font-size and it will look the same in both browsers.
Ex: font-size: 13px;
EDIT: also I recommend using pixels for the dimensions, using inches may have different displays between browsers (I haven't spotted any difference but I prefer to use pixels in a pixel environment).
Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera. You can't force browsers to render text identically.
For sub pixel problems in css
you can reset your css by http://developer.yahoo.com/yui/reset/
More information here Fonts looks different in Firefox and Chrome
Related
I've never faced this issue ever, so I completely updated my mac + Safari (macOS Big Sur 11.2.3, Safari 14.0.3). The problem is that whatever js interaction I use on my page is bugged in Safari only (work perfectly in FF and Chrome). You can see the kind of animations I use (gradual hiding + showing of elements via max-height + opacity on click of elements) in this snippet.
The problem is that Safari behaves very weirdly with these. Sometimes, the clicked element also disappears; disappeared elements fail to reappear when the animation is reset; sometimes one of the not-clicked elements disappears on hover; etc.; really weird things. All this while no console / js error is reported, and things work perfectly smooth in FF and Chrome.
In the Internet I found countless reports about similar behaviour in Safari, but mostly the answer referred to js / css errors. My script's even written in ES5.
I checked about 100 times now, and have none of these errors.
Then I came across this post, which made me try to change the font. And indeed, everything also works in Safari when I use a default browser font as Arial, etc., but that's obviously not what my client wants.
The font of that site is Bank Gothic Light & Bank Gothic Medium, and I'm using ttf and woff files as font source files, which I define as custom fonts using #font-face in my stylesheets, and then I apply them via font-family in my stylesheets. With this, the animations have the mentioned weird behaviour in Safari. Simply when changing the font of the concerned elements to let's say Arial, it all works.
Ideally, I want every animation to work, while sticking to the Gothic fonts in all FF, Chrome AND Safari. Any clue what to do here / why this happens?
Problem solved by getting a new font source file (ttf and woff) from another source; seemed to be buggy (Nothing at all changed in my HTML, CSS, JS, PHP, not in whichever code!). I changed the title of my question to be more general, as one may (at least that was the case for me) totally not think that these Safari - rendering issues are due to the used fonts... To avoid that people with the same issue may not need to search for the reply for hours..
Chrome
IE Standard mode
if you compare both the pages the IE standard mode is having little bit larger font-weight as compared to the Google chorme.
Open this page in both chrome and IE standard mode
exactly what i am saying is open whatever page you want to ,and compare it in chrome and IE standard mode . The IE standard mode is taking little bit larger css font-weight than chrome
how solve this isssue.,when i want my web page font to be neutral.. means it should take the same font which i have given in css
please give me the solution, thanks in advance
This is not an issue, this is just behavior of each browser how it behave in its different way, why because all browsers are not made of same development(Chrome, IE, FireFox).
Solution: Use reset CSS to avoid difference between browser rendering.
https://www.webpagefx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/
I tried to compare it on IE11 and chrome but it looks okay on my end but if its really a bother, you can use some css hacks for IE and adjust the font size and font weight.
IE10 and IE11
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
I was working a with a site and I had know the width of the screen that's why I tried with screen.width but I don't know why I'm getting different result on Firefox and Chrome. Seems Firefox showing me the correct value but Chrome doesn't.
Is there is anyone who can assist me to know whats the reason?
Thanks
The reason is that there is no current standard that defines what the value should be. The closest is the CSSOM View Module, which states that:
The width attribute must return the width of the output device, in CSS pixels.
However, that specification is a Working Draft, which means it is a work in progress and the definition stated may not be what is implemented. Indeed, the Editor's Draft gives two different definitions:
The Web-exposed screen area is one of the following:
The area of the output device, in CSS pixels.
The area of the viewport, in CSS pixels.
So obviously, browser vendors are taking whichever definition they want.
For more discussion on that property, see PPK's rant "screen.width is useless" on Quirks Mode
I have a background image which is responsive. It adapts to the container with the background-size: 100% method which keeps the aspect ratio. However, for older browsers like Firefox 18 and below and all versions of internet explorer I get a bad image when scaled (jagged or blurry). I tried the css bicubic interpolation (internet explorer) and "image-rendering" (firefox) fix yet no effect what can be observed.
My question is: is there a jquery or javascript way that does the same job while preserving the quality? Like a browser independent scaling method. Googled but found nothing.
I know this is not ideal in terms of speed and I should instead do the resizing in my image editing software but this is not an option in my scenario.
Would be happy to hear about your answers,
Sincerely,
Michael
The only good solution I found to provide the best possible quality is by using a css responsive method.
For latest chrome & safari you have the new HTML attribute SRCSET.
For olders browsers, you can use your images as a div background and change it dynamically with CSS only.
For very old browsers, the only way is to grab images with different sizes using JS...
I have a pretty complicated SVG doc I'm displaying on IE 10. It's stretched to the full size of the viewport and uses the viewBox attribute. I'm noticing that transforming layers in the doc is EXTREMELY slow (like, 1fps slow). This does not happen in other desktop browsers.
Aside from JS profiling using F12, anyone have ideas on other tools available for IE10 that would be relevant to figure out what's slowing down my transformations?