google fonts css overflow behaviour chrome vs firefox

Question

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

For me, they look exactly the same in Chrome 18.0.1025.151 and Firefox 11.0 (Mac OS X 10.7.3). — Cthulhu, Apr 09 '12 at 15:24

Kamal · Accepted Answer · 2012-04-14T18:44:58.140

4

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.

edited Apr 14 '12 at 18:44

answered Apr 07 '12 at 12:40

Kamal

1,122
11
18

Most likely you need to do this – Bantros Apr 07 '12 at 19:54
Thanks, please see my edit for follow up question. (If I can award partial bounty points I will do so.) – fortuneRice Apr 07 '12 at 23:02
1

@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. – jamesmortensen Apr 08 '12 at 03:27

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

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.

edited May 23 '17 at 10:32

Community

1
1

answered Apr 07 '12 at 19:25

mikevoermans

3,967
22
27

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 Apr 07 '12 at 23:03

score 0 · Answer 3 · answered Apr 13 '12 at 05:56

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.

score 0 · Answer 4 · answered Apr 13 '12 at 05:58

0

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

answered Apr 13 '12 at 05:58

WolvDev

3,182
1
17
32

google fonts css overflow behaviour chrome vs firefox

4 Answers4