CODEWITHSUNDEEP
htmlcssfirefoxmozilla
James G.
James G.

Reputation: 2904

Firefox box-shadow performs differently

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?

Upvotes: 2

Views: 587

Answers (3)

James G.
James G.

Reputation: 2904

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;

Upvotes: 4

Rene van der Lende
Rene van der Lende

Reputation: 5281

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.

Upvotes: 0

Stormy
Stormy

Reputation: 103

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>

Upvotes: 2

Related Questions