I have encountered a curious thing: a part of a html code shows differently in the same browsers; I am guessing that it has to do with the operating system, but maybe not.
Here are the screenshots. The code is an identical repository in gitlab. The browser is Firefox, but we tried with other browsers too, to the same result.
Ubuntu version:
Windows version:
The part in question is the red text, in ubuntu its more on the left of the div. All windows are at 100% zoom. The browser versions are the same, Firefox 102.0.
The issue was a missing font. We use Verdana and it was not installed on the ubuntu system. After installing verdana everything looked finally the same.
Related
I really don't know what to do so I hope that maybe one of you can find the solution for this issue:
https://www.schwitzen.bubblfy.com/
This wordpress website is shown different on Windows than on Mac. So on my Windows Computer I am using Google Chrome. And even on Firefox it is the same site.
But when I use the website on a MAC, it looks completely different. (Not the same font, not the same margin, etc..)
At the beginning I thougt, that maybe MAC's Safari Browser is the reason for this but even when I open Firefox on the MAX, it looks different. Why?
How can I adjust the site so, that it looks like on the Windows Version?
Hope you can help me!
Kind regards
The browsers use fonts preintsalled in operating system and display text via font-family css.
The different operating systems have different font families pre-installed, and when a certain font is missing, it is silently substituted with another. Moreover, the font that is used for substitution may be a native to the OS and specific to that particular OS only.
The same font size can be displayed differently on different OS.
Besides fonts, there might be other problems of different website view such as rendering engine(webkit, presto...), browser version, client operating system, browser-specific code and etc.
For all of my chromium based browsers, I'm getting a very bad font within Oryx for ErgoDox. If you're not familiar with the tool, you can see my keyboard layout here.
Update: I'm seeing in "Rendered Fonts" a strange font I don't recognize. Now I'm trying to work out how this is even happening, and why it's all my chromium browsers. See bottom photo below.
Update 2: The current theory is that my system is using the first "sans-serif" font it finds because of a syntax error in ErgoDox's CSS for the font-family; "Lato" should be enclosed in single quotes ' and it is not. This is causing my system to fall back to the first sans-serif font it finds, which is normally something more useful like "Arial", but is pix PixelFJVerdana12pt in my case. I've installed both "Lato" and "LatoLatin" and it is still rendering this awful font.
Update 3: Uninstalling "pix PixelFJVerdana12pt" fixed the issue ?? Now I'm looking into that font to figure out what the heck that even is? Now it renders Lato from the web? I'm putting an updated screenshot at the bottom with it fixed.
Here's what I've discovered and tried:
The site uses "Lato,sans-serif;" for all its fonts - loaded from woff2/woff files hosted on their site.
This problem exists for all of my chromium browsers: Chrome, Brave, Vivaldi, Edge.
The site loads just fine in chromium (Chrome) for a friend of mine.
The site loads just fine for me on my mobile phone.
Extensive searching online yields no reports of anyone else having this issue.
The site displays fine in Firefox.
I've installed Lato to my machine directly from Google Fonts.
I've downloaded the woff2/woff files from ErgoDox and opened them using a woff viewer online; they display correctly there.
Reloading the site with cache disabled does not work.
There are no console, or network errors (in developer tools).
The only extensions I have installed in this instance of chromium are: 1Password, Adobe Acrobat and Application Launcher for Drive (Google).
I run Windows Defender and Malwarebytes Enterprise.
I highly suspect this issue is local to me, and not a more global issue.
Anyone else with this issue? Any suggestions?
Problem demonstration:
Weird rendered font:
After uninstalling "pix PixelFJVerdana12pt":
The solution to the problem was to uninstall the "pix PixelFJVerdana12pt" font. I have no idea what is wrong with it, but it's now working as expected.
Those of you who get your kicks out of IT troubleshooting and mysteries, this is a good one for you to try to figure out! I'd still love to understand why this was happening - so strange.
I think I've figured it out and fixed it on my system - the font pix PixelFJVerdana12pt/PixelFJVerdana12pt by Flashjunior.ch has a TTF UniqueID of 0, which must cause Windows's font handling to treat it differently. I changed this to the font's name in FontForge, and replaced it on my system - after a restart of Chrome, the fonts in Oryx and gameatlas.com seem to be how they were intended to look.
So I found this site to make some silly text. I see this. Now I have a bunch of fonts installed that should allow me to see this (DeJaVu, Arial Unicode, Quivira, etc) and I tried various encoders too. I have no issues in Firefox and Chrome works on my MacBook but on my Windows 8.1 PC it just won't show. I am able to see this thing: ยป which some people have trouble seeing. And I tried incognito and still not working. Am I doing something wrong or what?
Have you tried installing the font Code2000? If that doesn't work with Chrome, try Code2000 in the newest IE (where I confirmed it work).
I have the exact same version of Google Chrome (22.0.1229.94) on both my Mac (OSX 10.8.2) and my PC (Windows XP SP2) but my input buttons are being rendered slightly differently (the pc version is moved down slightly).
Here is shot of my devtools
Mac Version
PC Version
Obviously not a huge difference but enough to make it stand out. Any obvious flaws in my code?
I didn't realize that my font sizes were different. That seems to be the issue.
I have the following http://jsbin.com/ojeja4/2/edit
The button and the expiration date working correct in windows, in all browsers but in OS X in safari & firefox (and maybe others) I find out that the button and the expiration date isn't correct.
Below I have print screens:
Windows - Firefox and all other browsers
OS X - Firefox
OS X - Safari versions 3,4,5
I really can't understand what is the problem. I tried use position instead of margin and padding but the result still the same. I found a jquery script and I used it, which recognize the os and browser, but I don't see the reason for a css problem to use a jquery script.
Is it a common problem between windows and os x or I did a mistake in code that I can't understand?
Thanks
It could be because of the font. Your are using Arial on Windows and Helvetica on Mac. Try using a cross operating system font. Or maybe something like Google Font API.