homepage Welcome to WebmasterWorld Guest from 54.198.94.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Body background-image problem when positioned right
Adapting website for dir="rtl" (content in Arabic, Hebrew, ...)
jonter




msg:4491235
 12:41 pm on Sep 4, 2012 (gmt 0)

Hi all,

While adapting a website for contents written right to left (Arabic, Hebrew, ...) I
indicate this in the html tag by setting dir="rtl". I also change the alignment of the
background image to "background-position: top right" instead of "top left" as in the
English, Spanish, ... versions of the web site.

Oddly enough, this works great in IE while Chrome, Safari, ... fails when the horizontal
scrollbar appears. At this time, the background image starts sliding to the left while
I make the window smaller. If I now scroll all the way to the left I notice that the
background image is aligned to the right of the viewport instead of the document
which is wider than the viewport. I tried adding a "min-width: 900px" to the body
without any luck.

I include simplified html to isolate the problem. In the example, I want the word
"Contents" to always be on top of the blue background as I scroll make the window
smaller.

If I add the background-image to the contents div, I will achieve the desired effect.
However, I want the background-image to reapeat-y all the way to the bottom of the
document, not only the contents div.

Thank you for any hints! Here goes the code:

<html dir="rtl">
<head>
<style type="text/css">
body {
margin: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAACAgMAAABQ2kAmAAA
AAXNSR0IArs4c6QAAAAlQTFRF5ev/9Pb/////KIKAcgAAAAFiS0dEAIgFHUgAAAAJcEhZc
wAACxMAAAsTAQCanBgAAAAHdElNRQfcCQIMFSrrJQqoAAAAFUlEQVQY02PgWjU4wQoGokD
UkHY+ACqhykF2Ey1yAAAAAElFTkSuQmCC);
background-position: top right;
background-repeat: repeat-y;
}
#contents {
width: 900px;
}
</style>
</head>
<body>
<div id="contents">Contents</div>
</body>
</html>

[edited by: alt131 at 9:12 pm (utc) on Sep 4, 2012]
[edit reason] Thread Tidy - Side Scroll [/edit]

 

jonter




msg:4491275
 3:03 pm on Sep 4, 2012 (gmt 0)

Update: Firefox and Opera works correctly just as Internet Explorer.
It's a Webkit problem. Probably associated with this: [lists.webkit.org ]

Anyway, if you can think of a workaround for the background-image problem, please let me know.

rainborick




msg:4491333
 6:48 pm on Sep 4, 2012 (gmt 0)

It seems to be working fine in my copy of Chrome/v21.? and Safari v5.1.7 on Win 7. The background image fills the window vertically, just as it does in Firefox.

jonter




msg:4491336
 7:14 pm on Sep 4, 2012 (gmt 0)

Thanks rainborick, although vertical fill is not the issue here.
If you make the window smaller until the horizontal scrollbar appears,
you will see how the background image slides off to the left.

jonter




msg:4491407
 10:02 pm on Sep 4, 2012 (gmt 0)

Moderators have modified the html code included in my original post. Please be aware that if you copy/paste the code, all background-image's data must be without any line wraps.

jonter




msg:4492628
 9:49 am on Sep 8, 2012 (gmt 0)

I have reported this issue as a WebKit bug #95951. [bugs.webkit.org ]

While the bug is being reviewed and hopefully fixed, I'm still looking for a workaround.

[edit: added url to bug report]

lucy24




msg:4492773
 7:39 pm on Sep 8, 2012 (gmt 0)

Out of curiosity... what happens if you don't change the background-position directive? I wouldn't be surprised to find webkit isn't really getting it wrong: all the other browsers are. See, you've told it to flip the directionality of all right/left elements. So if you say that something is to be positioned right, and then add a <dir = "rtl"> layer, then it stands to reason that your right-aligned element should instead be left-aligned.

Swiping an idea from alt131 here... It might work better if you keyed your CSS to the direction attribute.

body[dir=ltr] {one version of your background here}
body[dir=rtl] {other version of your background here}

The folks at w3c [w3.org] go on for quite a while about directionality. There may even be something about backgrounds, but the chapter gives me a headache so I can't say for sure.

jonter




msg:4492927
 10:56 am on Sep 9, 2012 (gmt 0)

Out of curiosity... what happens if you don't change the background-position directive? I wouldn't be surprised to find webkit isn't really getting it wrong: all the other browsers are. See, you've told it to flip the directionality of all right/left elements. So if you say that something is to be positioned right, and then add a <dir = "rtl"> layer, then it stands to reason that your right-aligned element should instead be left-aligned.

This is incorrect. Setting dir="rtl" only tells browsers that text will be read right-to-left instead of left-to-right. Inline elements will aligned right instead of left as we are used to. Right is still right and left is still left in CSS.


body[dir=ltr] {one version of your background here}
body[dir=rtl] {other version of your background here}

The problem is, what CSS should I use in the body[dir=rtl] version that would make the background image align to the right in a webkit browser when horizontal scrollbars are visible?

Aligning the body background image to the right probably only makes sense in a RTL page, but I've found out that if you try these URLs in different browsers, the dir="rtl" is not the problem here. Webkit will align the background image to the right of the viewport instead of the document, even though the document's body has a width value larger than the width of the viewport.

[edited by: alt131 at 11:25 am (utc) on Sep 9, 2012]
[edit reason] Thread Tidy [/edit]

alt131




msg:4492930
 11:21 am on Sep 9, 2012 (gmt 0)

Hi jonter, interesting issue and appreciate the simplified code example - but (like rainborick) I can't reproduce the issue at all. I don't Chrome, but on the provided code winSafari5 doesn't produce horizontal scroll bars without adjusting the code, and when it does, the word "content" remains aligned as desired. That makes me wonder if there is something in the original code that is affecting the alignment.

Being unable to see the exact issue makes it hard to suggest a "fix", however I did achieve horizontal scroll-bars and the correct alignment by setting 900px as the min-width on HTML (not body). My other thought was exploring to see if background-size might help.

jonter




msg:4492959
 3:32 pm on Sep 9, 2012 (gmt 0)

I'm reproducing this on:
  • Windows 7/Chrome
  • Windows 7/Safari 5
  • Windows 7/WebKit MiniBrowser (nightly build 2012-09-06)
  • Windows XP/Chrome


It's troubling me that none of you are able to reproduce this. Either I'm not able to explain myself (most likely), or depends on OS or something else client side related.

[edited by: alt131 at 8:39 pm (utc) on Sep 9, 2012]
[edit reason] Thread Tidy [/edit]

alt131




msg:4493062
 8:57 pm on Sep 9, 2012 (gmt 0)

Hi jonter, I think the explanation is fine, but yes, being unable to reproduce the issue does raise questions about causes other than pure code.

I'm on XP. Can someone running win7 confirm they are not observing this as well?

OK, looking at trouble-shooting just code at this stage. First, have you tested the document with borders/outlines around the elements to confirm where the elements are being drawn? Second, have you inspected the document and confirmed there is absolutely no difference in the reported rendering between browsers?

Finally, one of the issues for me is that the provided code is not triggering a horizontal scroll bar when it should, and it is not possible to drag the page sideways using a sticky right click either. That puts me in mind of an old firefox bug that behaved the same way. I realise this may seem only indirectly related to this issue, but I think it might be worth searching for information about incorrect scroll behaviour as well.

lucy24




msg:4493086
 9:25 pm on Sep 9, 2012 (gmt 0)

This is incorrect. Setting dir="rtl" only tells browsers that text will be read right-to-left instead of left-to-right.

If direction applied only to text, there would be no need for the attribute at all, because a browser that can do Hebrew or Arabic will do them in the correct direction. The <dir> directive applies, at a minimum, to text and tables. That is, if you've said <dir="rtl"> then each table row will run from right to left rather than left to right.

There are further complications when you get into side-by-side issues like {display: inline-block} or multi-column formats.

jonter




msg:4493106
 10:14 pm on Sep 9, 2012 (gmt 0)

And yes, cells within a table are included by the RTL. They are mirrored as the visitor will read right-to-left.

alt131, I'm not sure why you're not seeing the horizontal scroll. You should change the word "Contents" to "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx ....", you get the idea, this SHOULD make a scrollbar appear, don't you think?

I would love to include a screen dump, is there any way I can do so?

[edited by: alt131 at 10:36 am (utc) on Sep 10, 2012]
[edit reason] Thread Tidy [/edit]

alt131




msg:4493192
 10:27 am on Sep 10, 2012 (gmt 0)

Hi Jonter. For the second time, a screen dump is not required. The issue is that others have been unable to reproduce the behaviour you report. That does not mean they do not understand the problem, it means they are providing you with information to use as you try to identify the source of the issue. Further, in my tests I have increased the quantity of text, plus trialled several different elements to see if that would trigger a scroll bar. I have also already trialled white-space setting, as well as character sequences without any white-space. I have also tried various positions, widths and displays, as well as making other adjustments. At this stage, the text is clipped rather than forcing a scroll bar in wnSafari5&3 with dir=rtl.

At this stage I suggest the thread move from finding reasons to include links, to trying to ascertain the cause of the issue. Again, have you tested the document with borders/outlines around the elements to confirm where the elements are being drawn, and have you inspected the document and confirmed there is absolutely no difference in the reported rendering between browsers? Finally, have you searched for information about incorrect scroll behaviour?

jonter




msg:4494852
 7:20 pm on Sep 13, 2012 (gmt 0)

Thanks everyone for your time and effort.

I have now been recommended a nice workaround, basically an absolute positioned image with z-index=-1.

In response to alt131,
Again, have you tested the document with borders/outlines around the elements to confirm where the elements are being drawn

Bordering elements confirms their positions, they are OK.

and have you inspected the document and confirmed there is absolutely no difference in the reported rendering between browsers?

I have inspected the document. DOM and CSS are identical between browsers. Only difference being the graphical rendering of the background image as described before.

Finally, have you searched for information about incorrect scroll behaviour?

I have not. I wouldn't really know what I would be looking for here since I'm not experiencing incorrect scroll behavior.

Thanks again guys.

[edited by: alt131 at 1:35 pm (utc) on Sep 15, 2012]
[edit reason] Thread Tidy [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved