Closed Bug 569266 Opened 14 years ago Closed 14 years ago

CSS3 media-query max-width ignores browser scrollbar

Categories

(Core :: CSS Parsing and Computation, defect)

x86_64
Linux
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: lion, Unassigned)

References

Details

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.3) Gecko/20100416 Mandriva Linux Firefox/3.6.3
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.3) Gecko/20100416 Mandriva Linux Firefox/3.6.3

The appearance of the browser scrollbar changes the "body.offsetWidth" value, but does not have any effect on the 

@media all and (max-width: 800px) {

rule.


Reproducible: Always

Steps to Reproduce:
Please see attached test case.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title>FF CSS3 media-query test case</title>

	<style type="text/css">
body { 
	margin: 0;
	padding: 0;
}

@media all and (max-width: 800px) {
	.csstest {
		background-color: red;
	}
}
	</style>

<script type="text/javascript">
function showSizes()
{
	showWidth("body", "bodywidth");
}
function showWidth(elemId, widthField)
{
	document.getElementById(widthField).innerHTML = document.getElementById(elemId).offsetWidth;
}
window.onresize = showSizes;
window.onload = showSizes;
</script>

</head>
<body id="body">
	<h1>Some text is needed here, to show the scrollbar</h1>
	<h1 class="csstest">Some text is needed here, to show the scrollbar</h1>
	<p id="bodywidth"></p>
	<h1>Some text is needed here, to show the scrollbar</h1>
	<h1>Some text is needed here, to show the scrollbar</h1>
	<h1>Some text is needed here, to show the scrollbar</h1>
</body>

Steps to reproduce:
1. Open the window high enough to fit the test content
2. Start resizing horizontally, the second heading becomes red at 800px
(there is a javascript to show body width)
3. Shrink the browser vertically to let a browser scrollbar appear
4. Start resizing horizontally, the second heading becomes red at 785px instead 800px


Expected Results:  
The body width and the media query rule should depend on the same width value.

Tested in the following browsers too (all Mandriva Linux 2010 x86_64):

Konqueror 4.3.5: works as expected
Chrome 5 beta: works as expected
Opera 10.52:
  - scrollbar not present: works as expected
  - scrollbar present: requires page reload to update layout (sideblock fall)
Firefox 3.6.4:
  - scrollbar not present: works as expected
  - scrollbar present: CSS media max-width rule ignores the lost space
Attached file Test case HTML file
Styles inside the @media rule could change whether a scrollbar is present, so it's a bad idea to have whether those rules are used depend on whether the scrollbar is present.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → INVALID
Ok, you are right. This matches CSS3 standard. However this is unusable, because a rule to make space for the content at a specific width won't be effective when needed, because scrollbar will make the content not fit before the rule is applied. I guess that's why other browsers didn't implement it "right".

I didn't say the rule should change its behavior depending on scrollbar's visibility. I just expected it to become in effect when the body-width (offsetWidth) is the given pixel value. For example, a rule set for 800px is activated when the body.offsetWidth is 800px. But no, because when body is 800px, the viewport width is 818px, with scrollbar, so the rule won't activate. Sorry for taking your time guys.

INVALID is OK:

http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/#width

"The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any)."
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: