Firefox box-decoration-break bug
If any element on the page has direction: rtl then the padding on any element using box-decoration-break: clone doesn't work.
by Carosn Shold
HTML
<div style="width: 250px; padding: 20px;">
<span class="element background">This element has a background color set. If any element on the page (not just a parent) is set to <code>direction: rtl</code> then <code>box-decoration-break: clone</code> ignores padding on the element in Firefox.</span>
<hr style="border: none; padding: 20px;">
<span class="element border">This element has a border and border radius on it. It is not effected by the rtl direction.</span>
<hr style="border: none; padding: 20px;">
<span class="element shadow">This element has a box shadow on it. It is not effected by the rtl direction.</span>
</div>
<div class="direction">
This element has direction: rtl.
<br>
<br>If you delete this element or remove its class (in the editor, not dev tools), padding is applied correctly to elements with <code>box-decoration-break: clone</code>.
</div>
CSS
.element {
line-height: 1.5;
padding: 4px 15px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.background {
background: pink;
}
.border {
background-color: lightblue;
border: 2px solid blue;
border-radius: 10px;
}
.shadow {
box-shadow: 3px 3px 5px green;
border-radius: 5px;
}
.direction {
direction: rtl;
}