Bug Tracker

Modify

Ticket #11373 (closed bug: invalid)

Opened 2 years ago

Last modified 2 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 2 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 doing screwing something up. Removing it makes Firefox report the right width.

Version 0, edited 2 years ago by sindresorhus (next)

comment:2 Changed 2 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 2 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.