1 pixel shift to right - NOT fixed by any so-called "hacks" - Mozilla

This is a discussion on 1 pixel shift to right - NOT fixed by any so-called "hacks" - Mozilla ; Firefox 2 does not have this problem, Firefox 3 does: The problem is with a 1-pixel shift to the RIGHT on background images. I have seen 3 hacks and none of them are truly working hacks. They may seem to ...

+ Reply to Thread
Results 1 to 10 of 10

Thread: 1 pixel shift to right - NOT fixed by any so-called "hacks"

  1. 1 pixel shift to right - NOT fixed by any so-called "hacks"

    Firefox 2 does not have this problem, Firefox 3 does:
    The problem is with a 1-pixel shift to the RIGHT on background
    images.
    I have seen 3 hacks and none of them are truly working hacks. They may
    seem to work for some people whose backgrounds hide the problem
    somehow, but the fact is none of the hacks I have seen actually work.
    These hacks include:
    1. adding an extra pixel to your background-image to make it either
    odd or even # of pixels (I have seen both and, guess what, it can't be
    both!)
    2. placing the background-image on a DIV rather than the body and
    giving it a style of 'background: url(path/to/image.gif) 50% 50%
    repeat-y;'
    3. adding either margin-left or padding-left of -1px (I have seen both
    suggestions).

    None of these hacks actually work. All you need to do in order to
    prove this to yourself is create a very simple HTML document using a
    background-image of 40px tall and 2000px wide (half white, half black)
    with a style of 50% 50% repeat-y so that it centers on the page and
    fills the screen from top to bottom. Half of your screen should be
    black and the other half should be white.

    Now, place a 2-column table (for simplicity) of also half black and
    half white centered in the page.

    Make sure you remove all margins and padding so that the table is
    perfectly centered on the page.

    In Firefox 2, this will render seamlessly. You won't see the table
    against the background. In Firefox 3, you will see a 1-pixel shift to
    the RIGHT.

    None of the above "hacks" fix this problem. The only one which fixes
    it in FF3 breaks it in all other browsers (this "solution" is to add
    an extra pixel on the background image to make it 2001px instead of
    2000px. By doing this, you now create the same problem in Firefox 2
    and IE.)

    FF3 should have created Conditional Comments if they were going to
    change something like this which was not broken in the first place.

    .....
    Now, Safari has the opposite problem of a 1-pixel LEFT shift which
    someone has created a totally workable hack with javascript like this:



    .... If anyone knows how to create a similar javascript solution for
    Firefox 3, that would fix this stupid problem once and for all.

  2. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    Yup, this is indeed a problem.

    I found this neat CSS Browser Selector, but unfortunately it is not
    updated to reflect the difference between FF2 and FF3, so I can't get
    it to work.
    http://rafael.adm.br/css_browser_selector/

    ^ Perhaps someone could explain how to get that to work with Firefox
    3????



  3. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    Yup, this is indeed a problem.

    I found this neat CSS Browser Selector, but unfortunately it is not
    updated to reflect the difference between FF2 and FF3, so I can't get
    it to work.
    http://rafael.adm.br/css_browser_selector/

    ^ Perhaps someone could explain how to get that to work with Firefox
    3. If so, we could just swap background-images for different browsers.



  4. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    On Sep 29, 1:58*pm, Will Truman wrote:
    > Yup, this is indeed a problem.
    >
    > I found this neat CSS Browser Selector, but unfortunately it is not
    > updated to reflect the difference between FF2 and FF3, so I can't get
    > it to work.http://rafael.adm.br/css_browser_selector/
    >
    > ^ Perhaps someone could explain how to get that to work with Firefox
    > 3. If so, we could just swap background-images for different browsers.


    It looks like the FF3 code is at the bottom if you scroll down the
    page. I'll give that a shot. thx

  5. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    I tweaked the Safari (WebKit) javascript a bit to include Firefox 3:

    // Forces Firefox 3, Safari (and other WebKit browsers) to resize the
    browser when an odd browser width is detected.
    // This is a workaround for the 1 pixel background shift (rounding
    issue).


    window.onload = resizeIfOdd;
    window.onresize = forceBrowserEven;

    function resizeIfOdd(){
    if(navigator.userAgent.indexOf('Firefox/3') != -1 ||
    navigator.userAgent.indexOf('WebKit') != -1)
    if(document.documentElement.clientWidth % 2 == 1)
    window.resizeBy(-1,0);
    };

    function forceBrowserEven(){
    window.setTimeout('resizeIfOdd()',5);
    };


    Its working for me with Mac Firefox 3 and Mac Safari 3.

    -Mordaga

    (BTW, the css_browser_selector is very handy, but it will not solve
    the problem because the 1 pixel shift is dependent upon the width of
    the browser being even or odd.)


  6. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    On 07.10.2008 09:56, CET - what odd quirk of fate caused
    mordaga@gmail.com to generate the following:? :
    > I tweaked the Safari (WebKit) javascript a bit to include Firefox 3:
    >
    > // Forces Firefox 3, Safari (and other WebKit browsers) to resize the
    > browser when an odd browser width is detected.
    > // This is a workaround for the 1 pixel background shift (rounding
    > issue).
    >
    >
    > window.onload = resizeIfOdd;
    > window.onresize = forceBrowserEven;
    >
    > function resizeIfOdd(){
    > if(navigator.userAgent.indexOf('Firefox/3') != -1 ||
    > navigator.userAgent.indexOf('WebKit') != -1)
    > if(document.documentElement.clientWidth % 2 == 1)
    > window.resizeBy(-1,0);
    > };
    >
    > function forceBrowserEven(){
    > window.setTimeout('resizeIfOdd()',5);
    > };
    >
    >
    > Its working for me with Mac Firefox 3 and Mac Safari 3.
    >
    > -Mordaga
    >
    > (BTW, the css_browser_selector is very handy, but it will not solve
    > the problem because the 1 pixel shift is dependent upon the width of
    > the browser being even or odd.)
    >
    >


    nice work.
    It pleases me to see someone understand the task of programming in such
    a way that "the computer will do what */I/* want".... and who doesn't
    resort to the excuse "it works for others, so it must be correct".

    again - nice work there!

    reg

  7. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    On Oct 7, 3:56 am, mord...@gmail.com wrote:
    > I tweaked the Safari (WebKit) javascript a bit to include Firefox 3:
    >
    > // Forces Firefox 3, Safari (and other WebKit browsers) to resize the
    > browser when an odd browser width is detected.
    > // This is a workaround for the 1 pixel background shift (rounding
    > issue).
    >
    > window.onload = resizeIfOdd;
    > window.onresize = forceBrowserEven;
    >
    > function resizeIfOdd(){
    > if(navigator.userAgent.indexOf('Firefox/3') != -1 ||
    > navigator.userAgent.indexOf('WebKit') != -1)
    > if(document.documentElement.clientWidth % 2 == 1)
    > window.resizeBy(-1,0);
    >
    > };
    >
    > function forceBrowserEven(){
    > window.setTimeout('resizeIfOdd()',5);
    >
    > };
    >
    > Its working for me with Mac Firefox 3 and Mac Safari 3.
    >
    > -Mordaga
    >
    > (BTW, the css_browser_selector is very handy, but it will not solve
    > the problem because the 1 pixel shift is dependent upon the width of
    > the browser being even or odd.)




    Thank you for solving this problem! I had the same issue!


  8. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    Mon, 29 Sep 2008 10:03:31 -0700 (PDT), /ccrider/:

    > Firefox 2 does not have this problem, Firefox 3 does:
    > The problem is with a 1-pixel shift to the RIGHT on background
    > images.
    > [...]
    > All you need to do in order to
    > prove this to yourself is create a very simple HTML document using a
    > background-image of 40px tall and 2000px wide (half white, half black)
    > with a style of 50% 50% repeat-y so that it centers on the page and
    > fills the screen from top to bottom. Half of your screen should be
    > black and the other half should be white.
    >
    > Now, place a 2-column table (for simplicity) of also half black and
    > half white centered in the page.
    >
    > Make sure you remove all margins and padding so that the table is
    > perfectly centered on the page.
    >
    > In Firefox 2, this will render seamlessly. You won't see the table
    > against the background. In Firefox 3, you will see a 1-pixel shift to
    > the RIGHT.
    > [...]


    Works just fine for me using latest Firefox 3.1 nightly and Safari
    3.1.2 on Windows:

    http://www.geocities.com/stanio/test/bkg-shift.html

    Do you see shifting with this example and Firefox 3.0.*?

    --
    Stanimir


  9. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    Fri, 10 Oct 2008 00:30:51 +0300, /Stanimir Stamenkov/:
    > Mon, 29 Sep 2008 10:03:31 -0700 (PDT), /ccrider/:
    >
    >> [...]
    >> In Firefox 2, this will render seamlessly. You won't see the table
    >> against the background. In Firefox 3, you will see a 1-pixel shift to
    >> the RIGHT.

    >
    > Works just fine for me using latest Firefox 3.1 nightly and Safari 3.1.2
    > on Windows:
    >
    > http://www.geocities.com/stanio/test/bkg-shift.html
    >
    > Do you see shifting with this example and Firefox 3.0.*?


    O.k. I've now saw the shift with Firefox 3.1 (but not with Safari
    3.1.2) - it appears depending on the browser window width. I guess
    when the viewport width is not even different rounding happens for
    the background image position and for the table cell widths.

    You may better address such issues to mozilla.dev.tech.css or
    mozilla.dev.tech.layout, next time.

    --
    Stanimir

  10. Re: 1 pixel shift to right - NOT fixed by any so-called "hacks"

    On 09.10.2008 23:30, CET - what odd quirk of fate caused Stanimir
    Stamenkov to generate the following:? :
    > Mon, 29 Sep 2008 10:03:31 -0700 (PDT), /ccrider/:
    >
    >
    >> Firefox 2 does not have this problem, Firefox 3 does:
    >> The problem is with a 1-pixel shift to the RIGHT on background
    >> images.
    >> [...]
    >> All you need to do in order to
    >> prove this to yourself is create a very simple HTML document using a
    >> background-image of 40px tall and 2000px wide (half white, half black)
    >> with a style of 50% 50% repeat-y so that it centers on the page and
    >> fills the screen from top to bottom. Half of your screen should be
    >> black and the other half should be white.
    >>
    >> Now, place a 2-column table (for simplicity) of also half black and
    >> half white centered in the page.
    >>
    >> Make sure you remove all margins and padding so that the table is
    >> perfectly centered on the page.
    >>
    >> In Firefox 2, this will render seamlessly. You won't see the table
    >> against the background. In Firefox 3, you will see a 1-pixel shift to
    >> the RIGHT.
    >> [...]
    >>

    >
    > Works just fine for me using latest Firefox 3.1 nightly and Safari
    > 3.1.2 on Windows:
    >
    > http://www.geocities.com/stanio/test/bkg-shift.html
    >
    > Do you see shifting with this example and Firefox 3.0.*?
    >
    >
    >
    > ------------------------------------------------------------------------
    >
    >


    looks OK here using FF3.0 on XPhome
    17" monitor at 1152x864 pix, 32bit colour!

    reg


+ Reply to Thread