Bug Tracker

Ticket #11373 (closed bug: invalid)

Opened 3 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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

comment:1 Changed 3 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 3 years ago by sindresorhus (previous) (diff)

comment:2 Changed 3 years ago by mikesherov

  • Component changed from unfiled to 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.

comment:3 Changed 3 years ago by sindresorhus

  • Priority changed from undecided to low
  • Status changed from new to closed
  • Resolution set to invalid

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.