Ticket #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: | ||
| 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:2 Changed 15 months 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 15 months 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.
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.