StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POgoogle fonts css overflow behaviour chrome vs firefox
text
Body
copied!<p>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.</p> <p>Here's a demo: <a href="http://jsfiddle.net/YPjRE/5/" rel="nofollow noreferrer">jsfiddle demo</a> This is a fixed width div with some sample text. "Playball" is a google font.</p> <pre><code>#box { height: 160px; width: 200px; border: black 1px solid; font-size: 2em; font-family: 'Playball', cursive; overflow-x: hidden; overflow-y: scroll; } </code></pre> <p>1) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Arial", there is NO overflow-y in both browsers. <img src="https://i.stack.imgur.com/fmQNO.jpg" alt="FF(L) vs Chrome(R), ARIAL, NO overflow-y"></p> <p>2) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Playball", there <strong>IS overflow-y in Firefox (see scrollbars)</strong> but NOT Chrome <img src="https://i.stack.imgur.com/8yEx6.jpg" alt="FF(L) vs Chrome(R), PLAYBALL, overflow-y"></p> <p>How can I make the CSS overflow consistent between Chrome and Firefox?</p> <p>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? <a href="http://jsfiddle.net/YPjRE/14/" rel="nofollow noreferrer">Latest fiddle</a>.</p> <p><img src="https://i.stack.imgur.com/hTj3c.jpg" alt="Chrome L, FireFox R"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload