Please see here: http://www.dearearth.net/ The jQuery plugin page with demo: http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

The issue appears in Safari and Chrome only.

To replicate the issue: While in either browser, try to dynamically resize the window size, and notice how under certain aspect ratios, the background is pushed down about 20px or so, revealing the bg color..

Any ideas why? This does not happen in the demo...:/

Thanks.

1 answer

Ktash 1851
2
points
This was chosen as the best answer

Alright, found the issue:

Fix

.bgstretcher, .bgstretcher ul, .bgstretcher li {
    list-style: none;
}

The Why

The issue is occuring when the width of the image becomes greater than the width of the containing <li> element, which is what it uses to resize dynamically like it does. When this happens, the browser tries to adjust for the size of the image by putting it on a new line so that it has a whole line to itself (or, more space) instead of sharing the line with any whitespace, or, in this case, any list styling that may be occuring. My guess is that you don't see this in other browsers like Firefox or IE because they use the image as a block model instead of the standards model most of the time (to my knowledge).

In looking at the demo, and trying to figure out why that didn't happen for them, this line was actually the solution. In the demo, they have this property set correctly. If you have the latest version, I would recommend letting them know about this issue for other users.

Answered about 8 years ago by Ktash
  • @ktash - Nicely done. +1 Abinadi Ayerdis about 8 years ago
  • @Ktash - VERY NICE! Thanks. Lost a good hour+ on that one... Will notify the dev immediately. Thanks! vulgarbulgar about 8 years ago