2

Css

body {
    margin: 0;
    padding 0;
    min-width: 1072px;
    height: 100%;
    background: url('bg_repeat.png') center top repeat;
}
.bg {
    min-height: 100%;
    background: url('bg_center.png') center top repeat-y;
}
.page {
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

Html

<body>
    <div class="bg">
        <div class="page"></div>
    </div>
</body>

It's essentially a centered fixed width page with a pattern background and an additional bg div to add a vertical gradient lighting effect.

The problem: When I have a 100% width div next to a horizontally centered div, I get those 1px back and forth shifts when resizing the browser window horizontally.

.page does not align to the backgrounds of bg and body or their centered text. In otherwords .page does not remain in the same exact horizontal position relative to the background image's position.

It's a minor problem. I don't have any pixel-perfect patterns or anything. I'm more just curious about this if it's even possible. I have seen IE 11 blurring or doing some half-a-pixel shifts with pixel perfect repeating backgrounds with certain window widths.

FIDDLE: http://jsfiddle.net/HJsNY/ However the problem does not reproduce in the fiddle. But the exact code causes 1px offsets in a full window. (using Chrome)

EDIT: Actually this jsfiddle does reproduce in Chrome. But only when the iframe width gets large enough (>~1300px) for some reason. On FF it's noticable on small window widths too.

Here's what happens: 1px background offset that keeps alternating when resizing browser window.

enter image description here enter image description here

Ivarpoiss
  • 1,025
  • 1
  • 10
  • 18
  • 2
    can you post a fiddle – Shivam Shah Mar 08 '14 at 18:54
  • I saved ur code and ran it on my computer in chrome, IE, FF. I saw no pixel shifting. I'm not even completely sure what you mean by pixel shifting. Is the center image shifting? Is the edge of the body background shifting? I saw nothing strange in any modern browser. In IE8 the center div shifts, but that is because `min-height` is not supported. – chiliNUT Mar 08 '14 at 19:33
  • 1
    I added example screenshots. – Ivarpoiss Mar 08 '14 at 19:59
  • try - http://fiddle.jshell.net/HJsNY/show/ - perhaps check your browser settings, ensuring you have not set any different font or zoom settings between the two ( whether this runs in an iframe *jsfiddle* makes no difference to the css, it is still a 'window' ) - – Rob Sedgwick Mar 09 '14 at 10:12
  • 1
    I can see this happening in all 3 browsers I have tested this in(Chrome, FF, IE 11). I have mostly default settings on all browsers + ABP ext. It's weird that I seem to be the only one who can notice this. Though I could see why this would be happening if not handled with care. Even and odd widths, centering different elements using different methods and all that... There probably exists a workaround using non-centered background image or something like that. – Ivarpoiss Mar 09 '14 at 11:43
  • Hi @Ivarpoiss- if you are **not** seeing it here --- **http://fiddle.jshell.net/HJsNY/show/** ( *your jsfiddle without the frames* ) you must have something else happening - either other CSS you have not provided or your clients have different zoom or font settings ) – Rob Sedgwick Mar 09 '14 at 14:31
  • 1
    @Rob Sedgwick - I am seeing this problem on all fiddles posted so far, including yours. Hope it's clear now. Initially I had a little confusion with Chrome when trying this out on jsfiddle and didn't see this problem happening anymore. It turned out that Chrome just behaves a little differently with different background image and window widths. The problem became best visible around ~1300px window width using current example. That's all. – Ivarpoiss Mar 09 '14 at 15:06
  • @Ivarpoiss, that's not my fiddle, it is yours - but good to know you are seeing the problem in all places now. – Rob Sedgwick Mar 09 '14 at 15:11
  • ^ As You said earlier - "Though this not reproduce in the jsfiddle iframe environment" – Rob Sedgwick Mar 09 '14 at 15:13
  • Try it on another machine if you can – Rob Sedgwick Mar 09 '14 at 15:14
  • Thanks. I edited my post a bit to make it more clear and deleted that comment. – Ivarpoiss Mar 09 '14 at 15:22
  • 1
    It's not 1300px it's exactly 1275px (your background's width) because it happens once the background image starts to be less than the viewport width - and there is something to center. The jsfiddle iframe was simply not wide enough. To get this pixel shifting it's necessary to have a horizontally centered element in another element that is also horizontally centered. Have you found a solution yet? I believe I have the same problem here: http://stackoverflow.com/questions/25505916/how-to-tell-where-a-horizontally-centered-element-is-exactly-if-it-is-not-preci – Firsh - justifiedgrid.com Aug 26 '14 at 14:17

1 Answers1

0

I think you need a css reset. Firefox (like every browser) displays css with some intern css. You must remove it.

Add this to your html :

* {
    margin: 0;
    padding: 0;
}

I updated your JsFiddle.

If you want more info this, I already wrote it here.

Did it solve your case ?

Community
  • 1
  • 1
aloisdg
  • 22,270
  • 6
  • 85
  • 105