I got some text with
font-size:9px
But it is displaying correctly in Safari and Firefox but not with Mac/Chrome (V32).
Left is chrome [bad] / Right is Safari [correct]
I can see in the code inspector that my font is 9px but chrome switch to 10px :
I heard about the minimum font size in chrome and tried to disable the auto adjustment by following style but did not work.
Any idea?
* {
-webkit-text-size-adjust: none;
}
i can only tell WHY it's not working but this might help you to go looking for a different way to solve your problem.
from chrome version 28.0.1500.11 chrome doesn't support -webkit-text-size-adjust anymore. (changelist is here: http://trac.webkit.org/changeset/145168). and safari follows along. on newer mac os versions text-size-adjust is already gone too.
I have problems with it as well, since i've built a whole website on rem units to make it not only responsive but totally flexible. this worked pretty nice but all of a sudden everything is huge now. i'm working hard on a solution for this, but if anyone has an idea i didn't think of i'd appreciate that very much.
as soon as i find a solution i'll come back to let you know.
Related
My clients website and others are appearing hugely zoomed in on Chrome compared to other browsers on WINDOWS only (specifically Microsoft EDGE).
All browsers on Mac OS are displaying the website correctly at the correct scale.
Can anyone help explain what's going on here.
The website is https://emirat.co.uk
I just tried that website on my browsers and it looks the same on everyone...
Stupid question, but it may work: do you maybe have a default zoom for Edge?
EDIT: this is how it looks for me
Since Chrome 71, Chrome started scaling according to the setting the user had in Window, which is not the case for edge. you can force chrome to ignore windows setting by running chrome with:
/high-dpi-support=1 /device-scale-factor=1.125
or set the windows scaling to 100%.
I am trying to use a font located at dafont.com called HelloEtchASketch.
I downloaded the font and placed it in my project folder. The font renders as expected in Firefox and Safari, but not in Chrome.
Safari:
Chrome:
The nice sketched effect in the character's body is seen in Safari, but not in Chrome. Chrome seems to fill the body of the character.
Could anyone please suggest a cause and possible solution for this? I have searched for hours for an answer but I have not been able to find anything useful.
Note: I am using Chrome on OS X.
I appreciate your time! Thanks.
Exploring with a friend, we found out that in Chrome, when you place text between header tags, for example, the stroke of the font becomes very large.
Setting this property in the h1 element in css helped:
font-weight: 100;
It only happens in Chrome.
I hope this can help anyone else who may come across this in the future!
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.
Im facing an strange issue with IE9. I see lots of random black borders in my page even thought they are either box-shadow or simple border: none. Im using windows in Parallel Desktop in my iMac. Is it just my computer or its a common bug?
It's not giving me any issues in IE9 or Google Chrome; it must be your computer.
It is an issue that we recently experienced with IE9, and if you are seeing it, there could be a good possibility that many others are too.
If I remember right, I think we resolved just by applying
img.class {
border-style: none;
}
for the appropriate classes/id's in CSS - it's probably worth playing around with this just to see if you notice anything change in your browser before ignoring the issue.
Try testing by applying the above to every image on the entire site, then you will see if it is resolvable from this method.