Bug Tracker

Opened 12 years ago

Closed 12 years ago

#11373 closed bug (invalid)

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

Reported by: richard@… 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)

Change History (3)

comment:1 Changed 12 years ago by sindresorhus

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.

Last edited 12 years ago by sindresorhus (previous) (diff)

comment:2 Changed 12 years ago by mikesherov

Component: unfileddimensions

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.

comment:3 Changed 12 years ago by sindresorhus

Priority: undecidedlow
Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.