Browser render issue

Hi Folks,

I have created a responsive website using HTML5 with Bootstrap. It is
working fine in Firefox, ie but when i checked in the chrome the page
looks like skewed and not clear(text).

Can anyone faced these type of problem, if yes could you please tell me how to solve this issue.

i can attach screenshot for your reference but as a new user site is not allowing to attach.

Just give us the website link please :smile: . If the website isn’t online, then please post the full HTML/CSS (so we can recreate).

idizital.com

If you are using custom fonts then that’s a known issue in Chrome and not much you can do about it until they fix it.

You should also ensure that you have ‘cleartype’ turned on if you are using windows.

Side-by-side of Chrome(left) and FF(right)

Edit-Ignore Notepad++…forgot that the second monitor would be on the screenshot.

Hi Ryan,

Thanks for your help.

May i know where to do code fix, i am not clear about the screenshot.

The screenshot shows Chrome/FF side-by-side. I do not see any difference. I was asking YOU where the issue is, since clearly it’s not present on my end :blush:

in chrome text is not clear it is blurry and not sharp like FF

In that case, Paul has given you the answer above. Read his post. It’s hard to see much of a difference though for me.

please check the image ryan: http://www.idizital.com/images/img.jpg

one more query site is working fine in FF and chrome but in IE its not working properly, even though in IE9 also it is not working.

For ex: slider not working in IE9

would using a google font be a solution?
I can see it is a bit blurry but maybe not so that most people would notice.

(S)he’s using google font currently. Custom fonts in general are the issue.

it’s our job PDX, we noticed that we need to fix that…:slight_smile:

As I said above this is a long standing issue in Chrome and mostly beyond your control. It was purported to be fixed in chrome 37 but I’m not so sure as it still leaves a lot to be desired.

An old fix was to add textstroke to the element concerned which made it a little bolder.

e.g.

‘-webkit-text-stroke: 1px’

However that sometimes makes the element too bold.

The issue does depends on the fonts chosen and some of the free fonts are the worse. If you choose fonts and then run then through the font-squirrel generator you may get better hinting in the fonts but obviously you can’t do that with google fonts.

Your image looks acceptable to me and the chrome fonts look better than the Firefox one as they seem to be anti aliased better.

one more query site is working fine in FF and chrome but in IE its not working properly, even though in IE9 also it is not working.(idizital.com)

For ex: slider not working in IE9

could you please help on this?

Where is the prettyPhoto js file?

You have it listed at this adress ‘idizital.com/js/jquery.prettyPhoto.js’ but its not there.

i have removed that

Yes you have removed the file but you are still calling it in main.js.

//Pretty Photo
$("a[rel^='prettyPhoto']").prettyPhoto({
	social_tools: false
});

That will produce an error which may (or may not) halt other things so needs to be rectified first.

i have removed that no change…