google fonts css overflow behaviour chrome vs firefox

Go To


I'm creating a specific function on a webpage that requires CSS overflow to be consistent between Chrome and Firefox (and ideally IE as well). When using common web fonts such as Arial there are no problems, but once I start using google web fonts, I see a difference in the CSS overflow.

Here's a demo: jsfiddle demo This is a fixed width div with some sample text. "Playball" is a google font.

#box {
   height: 160px;
   width: 200px;
   border: black 1px solid;    
   font-size: 2em;
   font-family: 'Playball', cursive;
   overflow-x: hidden;
   overflow-y: scroll;   

1) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Arial", there is NO overflow-y in both browsers. FF(L) vs Chrome(R), ARIAL, NO overflow-y

2) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Playball", there IS overflow-y in Firefox (see scrollbars) but NOT Chrome FF(L) vs Chrome(R), PLAYBALL, overflow-y

How can I make the CSS overflow consistent between Chrome and Firefox?

EDIT: Per Kamal's comment below, I've added a line height to both divs and indeed the scrollbar appearance is now consistence. However, another problem is on the third line, "jumped over the" fits in Chrome but only "jumped over" fits in FF. Any ideas? Latest fiddle.

Chrome L, FireFox R

2012-04-04 19:14
by fortuneRice
For me, they look exactly the same in Chrome 18.0.1025.151 and Firefox 11.0 (Mac OS X 10.7.3) - Cthulhu 2012-04-09 15:24
Same here. Most likely a windows font rendering issue - kmiyashiro 2012-04-10 04:27


Try changing the line height, as both screenshots, to me, look a little different in the spacing only, between the lines. EDIT : You should also try adjusting letter-spacing.

2012-04-07 12:40
by Kamal
Most likely you need to do thi - Bantros 2012-04-07 19:54
Thanks, please see my edit for follow up question. (If I can award partial bounty points I will do so. - fortuneRice 2012-04-07 23:02
@fortuneRice - Partial bounty is not possible; however, you can "accept" one answer with the green checkbox and award the bounty to another. Thus, one person would get +50 and the other would get +15 - jmort253 2012-04-08 03:27


I found a way to make your overflow more consistent. Realizing even though you specify overflow: scroll, the scroll doesn't take any effect unless there is a reason for it to, so we have to force it a bit more manually.

I found part of the solution here: How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

Also - I created a fiddle with the updated styles. So now even when the box is too small for the scrollbar to show up its still taking up space in the box in order to wrap your lines consistently.

2012-04-07 19:25
by mikevoermans
Thanks for your research. I'm looking for a way to get the CSS overflow consistent, instead of getting the scrollbars consistent. For my particular need, the scrollbar is just a visual indication of the CSS overflow - fortuneRice 2012-04-07 23:03


I think this is not solvable for each browser using different render engine, I mean browser elements like scroll-bar or checkbox (especially in Windows, you may test it on XP and 7, also in OSX and Linux)

Letter-spacing and Line-height, issue always occurred.

2012-04-13 05:56
by Cyril


Try to define line-height, letter-spacing and word-spacing in your css.

2012-04-13 05:58
by WolvDev