Firefox 12 html element won't shrink below 376px

Question

I have just created an HTML5 page with a background image in the top center.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Example</p>
    </body>
</html>

With the following CSS:

body 
{
    background-image: url('images/bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 36px 0 0 0;
}

But I have spotted a problem in Firefox 12.

No matter how much I shrink the browser window, the HTML element never falls below 376px. This causes the background position to no longer appear in the center, but instead it looks like it is right-aligned (and then crops the right-hand portion of the image).

In Chrome, Opera and Internet Explorer it works as expected, but in Firefox I get this strange behaviour. I have added a screenshot of all four browsers showing this page.

UPDATE

This seems to be related to the size of the toolbar in the browser as the width it stops at is identical to the width of the browser toolbar. A colleague has just tried it and his toolbar is 427px and it stopped at this value. I presume this is a Firefox bug.

Firefox HTML element larger than browser window

I can reproduce this only on the Windows version of FF12. Doesn't happen on Linux. Then I searched Bugzilla, but haven't found any match. — Mr Lister, May 25 '12 at 14:30
The blue box is the sample background image. All the HTML and CSS is in the post - there are no secrets. — Fenton, May 25 '12 at 14:57
Could you post your code on jsbin.com or jsfiddle.net? Here's what I got. http://jsbin.com/iyugud/ — Larry Battle, May 25 '12 at 15:15
It won't work on JS Fiddle as they put the contents into an iframe, but I have updated your JS Bin example to use a smaller background image so you can see the behaviour: http://jsbin.com/iyugud/4 — Fenton, May 28 '12 at 07:25

Larry Battle · Answer 1 · 2012-05-25T14:33:19.597

0

Your code shrinks properly in Firefox 12 for me.

I think it's one of your addons causing the problem. So you might want to disable a few and see if the problem goes away.

Also, try running Firefox in safe-mode and seeing if the problem exist.

"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode

edited May 25 '12 at 14:33

answered May 25 '12 at 14:26

Larry Battle

9,008
4
41
55

I tried safe mode and disabling all the plugins. It still happens until I switch off the normal toolbars (i.e. the address / search toolbar) – Fenton May 25 '12 at 15:01
@Sohnee same here, but again, only under Windows. – Mr Lister May 25 '12 at 15:46
@Sohnee Which version of Windows are you using? Larry, you too. And are you using Aero, etc? – Mr Lister May 25 '12 at 15:54
Windows XP. Oh. Maybe it's a Windows 7 Aero issue with Firefox 12. – Larry Battle May 25 '12 at 16:28

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

I think I resloved problem with Firefox. Check my answer to the same topic here and give me feedback if it was helpful ;) I don't want to paste the same answer in two places ;)

edited May 23 '17 at 12:01

Community

1
1

answered Jun 08 '12 at 11:03

Sófka

983
7
12

That is a great description of the problem, but isn't really a solution. There is no way I'm adding a message "Please hide your Firefox toolbar to view this website". – Fenton Jun 08 '12 at 11:21
I thought you need it to test for mobiles :) But if you must show your website for smaller widths you can detect browser (FF) and then hide toolbar with Java Script ;) Just add listener to event on resize window and under 500px (or 450px) hide toolbar. – Sófka Jun 08 '12 at 11:27

score 0 · Accepted Answer · answered Jun 25 '12 at 15:43

0

It looks like this is a genuine bug in Firefox, so I have raised a bug.

answered Jun 25 '12 at 15:43

Fenton

241,084
71
387
401

Firefox 12 html element won't shrink below 376px

3 Answers3

Linked