It took me the whole day to find a workaround for a problem I just wonder why it is not more commonly discussed here. I am facing a problem with Safari 13.1.1. when try to resize the browser window. It just does not dynamically resize (based on calculated viewpoint width) the font-size as it should:
html {
font-size: calc(1em + 1vw); /* not working when resizing */
}
My workaround works fine:
html {
font-size: 1vw; /* initialise first without calc() */
}
body {
font-size: calc(1em + 16px); /* now working fine when resizing */
}
As you can see you need to first initialise viewpoint width without calc(). The default font-size needs to be added in px. Now it works fine and the text resizes as it should when the window is resized.
My question: Why this strange behaviour? Any explanation? Or just a bug?
It looks like an old bug that was not solved. I'm currently having this bug in only some calc()'s in the page, not idea why. I'm using older macOS 10.11 and Safari 11.2, but since you're using version 13, if that's indeed the same bug, then it's not completely fixed. The workaround I've used was to set min-height:
#site-title {
font-size: calc(1rem + 4.5vw);
min-height: 0vw;
(...)
}
References to similar bugs:
Font-size calc dynamic size Safari failing
Why calc is not reevaluated when it is used for font-size?
https://css-tricks.com/viewport-sized-typography/
https://bugs.chromium.org/p/chromium/issues/detail?id=124331
Sara Soueidan recently posted about this and included an alternative fix suggested by Martin Auswöger using -webkit-marquee-increment: 0vw;, which is only supported in Safari.
https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/
This seems to be fixed in WebKit recently, see
https://bugs.webkit.org/show_bug.cgi?id=224614
Don't know what Safari version this will be.
One of the weirdest CSS issues I've seen. The .product-bottom and .product-title classes have the font-family: Roboto. This displays fine in IE and Chrome. Inspecting the elements in Firefox, the font is apparently used on the element and is successfully used throughout the site in other elements.
Editing the font-family attributes when inspecting the element has no affect on it. The computed css values show !important is not used. When used in the inspector on font-family, it has no affect. There are no jQuery or CSS errors, though there are plenty of CSS warnings.
The site is [removed after fix].
Screenshot of the font issue in FF. Problem text is: "Grey Hair Color Body Wave Human Hair Weave"
Disable
.product-title {
text-transform: full-width;
}
and it looks fine. The full-width value is only experimental and mainly supposed to be used with square letters like in Chinese.
Replease this css:
.product-title {
text-transform: full-width;
}
with this:
.product-title {
text-transform: capitalize;
}
Let's say I have the following:
<p>This is a paragraph containing some <code>code</code>.</p>
with the following styling:
p {
font: 16px/24px sans-serif;
}
code {
font: 16px/24px monospace, sans-serif;
}
Why does the code element throw out my line-height? Here is a jsFiddle that illustrates the issue: http://jsfiddle.net/sl1dr/chgyb/
EDIT: Upon further investigation I have discovered the the fiddle I linked to works fine on a Mac, but not on Windows. This is getting more and more intriguing as the site I am working on is having the issue on both Mac and Windows.
It is not a line-height change, it is because mostly different font-family's have a different margin around the font. But font-margin is not something what you can change with css. So you're right, you need to change the line-height: http://jsfiddle.net/chgyb/2/
I found here a working solution which is to set the font-size again and set the font-family to monospace, monospace.
I have a website which uses CSS for all of its styling, and in Windows, the line-spacing and font sizes are all consistant accross Firefox, Opera, IE, Safari, Chrome.
I have just tried it under Firefox on the Mac (Snow Leopard) and whilst the fonts generally look a little more bold than on windows, the general sizing looks about the same.
However, in Safari on the Mac, all of the fonts appear so much smaller, line-spacing is much tighter also.
What is the likely cause of this? Is it a known scenario, perhaps with a nice workaround?
If you would like to check the situation, the site in question is:
http://www.marcusstarnes.co.uk
Thanks
Since you set font-size in em (a good thing - don't change that!) the font-size depends on the browser settings / user preferences. You've probably got a smaller font set on Safari.
On the other hand, if you are in the "all browsers must look a-like, or the world will end" camp, then you shouldn't be using ems.
I'm unsure about the line-height: 1 in the reset style sheet. That just seems wrong to me...
EDIT:
Oh wait, I just discovered font-size:62.5%;. Doesn't change what I said, but that is uncomfortably small for many, because you are using two thirds of the users preferred size.
I know this is an older post, but I recently ran into the same issue. The only browser I was having trouble with was Safari on Mac. What I ended up doing to resolve the issue was change my reset from :
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
to
html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }
This just forced the browsers to all use the "medium" font size and then scaled it from there. The only reason I am adding this is because there really wasn't an answer given. Hopefully this will help someone that comes across this.
Elements with css font-size <12px doesn't have effect in Google Chrome - remains font-size 12px.
What should I do?
My Google Chrome browser uses default settings. My version is 4.0.249.89.
I am using Windows XP.
You can paste the following code to your Google Chrome to test it:
<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>
Results from different browser:
disable the auto adjustment by following style.
* {
-webkit-text-size-adjust: none;
}
-webkit-text-size-adjust is no longer working after Chrome 27.
Try using transform to refuce font-size forcely.
font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/
According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome supports a minimum font size. If you open "Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences" in a text editor, do you see something like the following?:
"webkit": {
"webprefs": {
"default_fixed_font_size": 11,
"default_font_size": 12,
"fixed_font_family": "Bitstream Vera Sans Mono",
"minimum_font_size": 12,
"minimum_logical_font_size": 12,
"sansserif_font_family": "Times New Roman",
"serif_font_family": "Arial",
"standard_font_is_serif": false,
"text_areas_are_resizable": true
}
}
Closing Chrome, changing the minimum font size, and restarting Chrome may help.
Chrome has a minimum font size setting. Mine was set to 11px (by default) so I had to change it to view smaller font sizes.
To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts > scroll down to the bottom and you will see the 'minimum font size' slider.
this should not be correct, you probably have an element overwriting your current given attribute.
like this:
body {
font-size:10px;
}
#content {
font-size:12px;
}
Is there a minimum font size preference? Is it set to 12px? Is page/text zoom enabled? Do you have any kind of Chrome plugins that alter page contents?
Same for safari. I guess this is set to 9px for accessibility reasons. The trick is to not rely on making your fonts that small, so that you are blowing them up in css rather than reducing them. This is of particular relevance if creating your own font using something like icnmoon. So, here it is best to reduce the glyphs sizes in the font, so that you are setting them quite large in your css and you are avoiding setting them to below 9px if the user 'zooms out'.
Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.
With regards tablets and smartphone and other devices, it may be possible to use the following to avoid automatic text size adjustments using the following:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none,
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-size-adjust: none;
This may actually break the accessibility of your websites on these devices but as far as I know there is no way to adjust your browser text size as it stands on these devices. They only seem to be adjusted automatically, depending on the situation which can be a bit of a mystery. These commands may prevent that, but i think the default minimum font that is set in your browser preferences may override that setting anyway, at least in some browsers.
what happens if you make the < P > tag a < SPAN > tag?
is it possible you have defined your < p > tag somewhere along?
It works for me in Chrome 4.0.249.78 (36714) , could you be viewing a cached copy?....Try emptying your page cache (I've found chrome very fond of its cache)
Chrome doesn't let you set the minimum size less than 6 point.
And text is legible A LOT smaller than that on Retina displays.
It works for me.
Try to:
use webdesigner tools, to check what css affects your element
post html and css aswell, so we can maybe figure out more
Edit:
Latest Chrome (stable) renders this this way:
(source: kissyour.net)
Chrome and Firefox now allow a minimum font size setting of zero. Chrome 73 had downstream problems with this, and since then Chrome changed their policy and user interface for this setting. I don't know the history on Firefox, and I don't know the state of this setting on Safari or other browsers.
You can use css property zoom (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
By setting zoom property equals to 0.25
all elements will be looked 4 times smaller,
so 12px font text will be looked like 3px font text.
.text {
zoom: 0.25;
font-size: 24px;
}
text will be looked like font-size: 6px; text.
But this property isn't supported by firefox.
Have you tried putting an "!important" clause behind the font styles? This would override everything else. At least then you would know where to look for the problem. Like this:
<p style="font-size:6px !important;">test 6px</p>
<html>
<head>
<style>
#text {
transform-origin: top left;
background: #aed5ff;
}
</style>
<script>
window.addEventListener('load', function() {
var node = document.getElementById('text');
var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
if (+fontSize <= 12) {
node.style.fontSize = '12px';
node.style.transform = `scale(${fontSize / 12})`
}
});
</script>
</head>
<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>
you can use
body {
font-size:125%;
}
to set 0.5em=10px.