Firefox box-shadow performs differently

Question

I'm trying to get an effect of "padded" lines of variable length in a span using the following css. We do not know what the content of the lines will be.

You can see the effect here:

#container{
  width:300px;
  margin:0 auto;
  background-color:#ccc;
  height:100px;
  padding:20px;
}

.text{
  max-width:250px;
}

span{
  max-width:250px;
  background-color: #FF8E1B;
  box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -moz-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -webkit-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  display: inline;
  padding: 1px 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: .28px;
  font-weight: 100;
  color:#fff;
}

<div id="container">
  <div class="text">
    <span>
      Hello World Hello World Hello World
      Hello World Hello World Hello<br>
      Hello World Hello World Hello World
    </span>
  </div>
</div>

In Firefox (only tested in 42), it only applies the box-shadow to the first and last line. In every other browser, it applies the box-shadow to every line.

1) Is this a bug in Firefox? Should I submit a bug report to Mozilla?

2) Is there a way to fix this or another way to get this effect with the given restraints?

Possible duplicate of [Is it possible to create box-shadow effect for inline text?](http://stackoverflow.com/questions/26062154/is-it-possible-to-create-box-shadow-effect-for-inline-text) — Vitorino fernandes, Jan 14 '16 at 09:38
It's certainly not a duplicate, but that question does answer part two of my question, so I'm not going to contest it. — James G., Jan 14 '16 at 16:32

score 4 · Answer 1 · edited May 23 '17 at 12:33

4

The answer on this question answers part 2 of my question, for anybody looking for a solution to this problem. These lines of css are required:

  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;

edited May 23 '17 at 12:33

Community

1
1

answered Jan 14 '16 at 16:41

James G.

2,852
3
28
52

score 2 · Answer 2 · answered Jan 14 '16 at 00:26

2

I don't consider this a bug. Different browsers display padding and margins differently and this is likely the way that Mozilla feels is best. If you want it to look consistent with Chrome, you can add the span to each line like this

<span>Hello World Hello World Hello World</span>
<span>Hello World Hello World Hello<br></span>
<span>Hello World Hello World Hello World</span>

answered Jan 14 '16 at 00:26

Stormy

93
1
7

We unfortunately do not have control over the content. – James G. Jan 14 '16 at 00:57

score 0 · Answer 3 · answered Jan 14 '16 at 03:50

Firefox does it correctly as you have only one <span></span>. In codepen's editor (or any other, for that matter) any number of text lines will be considered as one long line (even if <br> or the like is added, like in your example). So a box-shadow at begin/end of that line is the only correct output. Hurray for FF.

BTW: IE11, CH and FF all use webkit (to some extend anyway) where FF is the most W3C compliant.

Firefox box-shadow performs differently

3 Answers3