Unexpected behavior in Webkit browsers - background-image right aligned

StackOverflow https://stackoverflow.com/questions/12464366

Frage

While adapting a site for right-to-left readers (such as Arabic and Hebrew languages) I'm experiencing unexpected behavior in any Webkit browser when it comes to assigning a background-image to the body tag that is right aligned.

First of all, let me include an example page where this behavior can be seen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar">
<head>
<title>Body background image right aligned</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body {
    margin: 0;
    background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png);
    background-position: top right;
    background-repeat: repeat-y;
}
#header {
    height: 100px;
    background-color: blue;
}
#main {
    position: absolute;
    top: 100px;
    right: 150px;
    width: 610px;
    background-color: red;
}
#column {
    position: absolute;
    top: 100px;
    right: 0;
    width: 150px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="main">Main</div>
<div id="column">Column</div>
</body>
</html>

Now, make the windows smaller until a horizontal scrollbar appears. The background image will no longer be aligned to the right of the document, it will be positioned x pixels from the left where x is the width of the viewport.

The following browsers show this unexpected behavior:

  • Chrome (Win7 & WinXP)
  • Safari (Win7 & WinXP)
  • Webkit MiniBrowser, nightly build 2012-09-06 (Win7)

While IE, FireFox and Opera show the expected result where the background-image, independent of the size of the viewport, always is aligned to the right.

I'm a great Webkit fan but I havn't find any explanation to this other than.... it's a bug :( It would be great if anyone finds another explanation to this behavior. Basically:

  1. Does this happen to you as well?
  2. Is this due to my markup being incorrect?
  3. Are there errors in the CSS?
  4. Or... is it a Webkit bug :(

I should say that I'm not looking for a workaround, just a possible explanation. I've got a workaround already where I place an image absolute right:0 and z-index:-1.

Thanks!

War es hilfreich?

Lösung

  1. Yes I can repeat this effect by visiting your included link, using Chrome 21.0.1180.89 m on Windows 7 x64
  2. Your markup concerning background placement is not incorrect
  3. Your CSS concerning background placement is not incorrect
  4. I think this can be loosely defined as a "webkit bug"

To correct this behavior and maintain the background position as top right, change your body CSS to this:

body {
    margin: 0;
    background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png);
    background-position: top right;
    background-repeat: repeat-y;
    background-attachment: fixed;
}

I believe the webkit browsers are placing the background according to the width of the viewport as you mentioned, but are also redefining "top right" when the browser is resized. After resizing, if you use the bottom scroll bar to scroll all the way to the left, you can see the background fits again, however your elements are in the wrong location. setting background-attachment to fixed will fix your problem.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top