Bug Tracker

#11373 closed bug (invalid)

Opened February 22, 2012 03:09PM UTC

Closed March 13, 2012 11:23AM UTC

Firefox misreporting width, outerWidth and innerWidth when using @import of Google Web Font

Reported by: richard@richarddoyle.net Owned by:
Priority: low Milestone: None
Component: dimensions Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

Tested on Firefox 10.0.2

I'm not sure if this is a Firefox, Google Web Font, or JQuery bug, but here goes:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Fonts Bug Firefox</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
	$(function(){
		pageWidth=$(".holder").innerWidth();
		console.log(pageWidth);
		
	});
</script>
<style>
@import url(http://fonts.googleapis.com/css?family=Princess+Sofia);

.holder {
	width: 640px;
	height: 360px;
	background: orange;
}
</style>
</head>

<body>
<div class="holder"></div>
</body>
</html>

innerWidth(), outerWidth() and width() will always report the width of the browser window, not the element. This only happens when using @import, using a <link> element will not trigger the bug. The correct width is reported in the other browsers I tested -- IE8, Safari 5.1.2 (Windows), Mobile Safari on iPad and iPod Touch (iOS5)

Attachments (0)
Change History (3)

Changed February 22, 2012 06:42PM UTC by sindresorhus comment:1

_comment0: [http://jsfiddle.net/mofle/cTSdz/ Simplified testcase] \ \ Thanks for the bug report. Please remember the next time to submit the testcase as a jsfiddle (read the red box). \ \ Tested on Firefox 10. Looks like the "@import" is doing screwing something up. Removing it makes Firefox report the right width. → 1330075843441839

Simplified testcase

Thanks for the bug report. Please remember the next time to submit the testcase as a jsfiddle (read the red box).

Tested on Firefox 10. Looks like the "@import" is screwing something up. Removing it makes Firefox report the right width.

Changed March 12, 2012 04:37PM UTC by mikesherov comment:2

component: unfiled → dimensions

stranger still: http://jsfiddle.net/cTSdz/2/

If you wrap the same test case in setTimeout, it reports the correct value. Looks like a timing issue.

Changed March 13, 2012 11:23AM UTC by sindresorhus comment:3

priority: undecided → low
resolution: → invalid
status: new → closed

Actually, this is not a jQuery bug. Same outcome without jQuery: http://jsfiddle.net/cTSdz/3/

It's something to do with @import and DOMContentLoaded. window.onload works fine.