If I set position: fixed to my div, the font text inside will be rendered thinner and no readable at all.
If the position is absolute, relative or static the font is rendered in the right way.
The problem occur with Safari for iOS 6 only. I got no issues with an iPad with iOS 7.
Any ideas or custom webkit property I can tweak with?
(i've already tried -webkit-text-size-adjust: 100% with no results)
The problem occurs even with system fonts custom font.
Try the following
-webkit-font-smoothing: antialiased;
This is caused by the different way the browsers render fonts.
Related
I have a very simple page Here created by semantic-ui. the problem is some texts specially black colored texts are not visible in android firefox browser.I have tested this with 4 different mobile phones.
This is a windows Firefox:
And this is android Firefox:
Any idea what is the problem? I omitted my html code because it is too long
You have a setting of font-weight: 700; for those elements. If you erase that, the text becomes visible again. I suppose it's a font issue.
On this page, the SVG elements do not show up in Firefox, but they are displayed in Chrome correctly. The program used to generate the svg is present on the page.
The elements are present in the HTML and have the correct dimensions and location when viewed via Firebug.
I am at a loss as to how to explain the discrepancy. Can someone offer any hypothesis?
I am using Firefox 24.0 and Chrome Version 29.0.1547.65
Update: This seems to be fixed in Firefox 25.0 The text rendering has also improved!
Your SVG element is not sized properly (and overflow is set to hidden) so the content is not shown. You can solve it by specifying the unit in your css:
min-height: 600px; /* instead of 600 */
I was making a code formatter for my website and I encountered some strange behavior between desktop and mobile browsers. On desktop the code block looks like this:
and on my iphone the line numbers are, for whatever reason, in a smaller font size:
I haven't done anything to edit any sort of font sizes anywhere on my website. It's all default sizes. If I manually set the font size, say to 12px, it is still lined up on my desktop browser, and still smaller on my mobile browser.
The code block is laid out as a table with two cells. The left cell contains a 1 column table, each row contains a number. The right cell contains a 1 column table, each row contains a line of code.
Any idea why the font is shrunk on the mobile browser?
EDIT: LINK: http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/
EDIT2: It renders correctly on windows phones and android phones.
SOLUTION: Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked :Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put -webkit-text-size-adjust: 100% in the body { } section of my CSS to prevent mobile safari from messing with my text size.
Turns out mobile Safari decides to change text size for you! I saw a solution on this page that worked:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
I put the following in my CSS to prevent mobile safari from messing with my text size.
body {
-webkit-text-size-adjust: 100%;
}
Hopefully someone can help me figure this one out. I've tried countless things and I can't seem to figure this one out.
Using google chrome, this is what I see. The noticeable part is the icons of the navbar:
and scrolled to the bottom:
As you can see, the font weight is completely different and affected simply by scrolling. This behavior seems to happen only on Chrome on OSX, currently running 23.0.1271.95 (latest)
I have tried to force the weight on the font, with !important even -- it will alter the weight, but as soon as i scroll it will lower the weight for no apparent reasons. Any hints as to what could be causing this problem, and how I can possibly fix this, to ensure my website renders properly everywhere?
Most likely something is causing the browser to disable subpixel font antialiasing after you scroll the text. This could be any kind of CSS transformation, transparency, etc. On OSX, this will make the text look much less bold (see here for more on this: Unwanted Bolding added to font in browsers)
The solution is to pre-emptively disable subpixel font antialiasing. Apply this to your nav bar's CSS:
#navbar {
-webkit-font-smoothing: antialiased;
}
I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.
here is an example page from the page as it stands to try this:
Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.
Thanks.
It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.
EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.