Background padding issue in RTL websites.

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Derk-Jan Hartman]

Created attachment 63153 [details]
RTL background linewrap positioning for inline elements testcase

A link has the following CSS in ltr situations

a.external {
 background: url(http://bits.wikimedia.org/skins-1.5/vector/images/external-link-rtl-icon.png?2) no-repeat 0% 50%;
 padding: 0px 13px 0px 0px;
}

This draw an icon in the background to the right of the link. In RTL situations, the following css is used.
a.external {
 background: url(http://bits.wikimedia.org/skins-1.5/vector/images/external-link-rtl-icon.png?2) no-repeat 0% 50%;
 padding: 0px 0px 0px 13px;
}

In this case, when the link (inline element) line wraps, the background overlaps the left side of the first line part, where it should be positioned on the left side of the second line part. Attached example and screenshots.

[Derk-Jan Hartman]

Created attachment 63154 [details]
Display of css in LTR case

[Derk-Jan Hartman]

Created attachment 63155 [details]
Display of RTL rendering

[Derk-Jan Hartman]

Note, Firefox does render the expected behavior, Chrome and Opera match the behavior of Safari.

*** This bug has been marked as a duplicate of bug 9272 ***