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: | 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:2 Changed 12 years ago by
| 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.
comment:3 Changed 12 years ago by
| 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.
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.