1194276 - Right border on double box shadow inside an odd width and margin auto container

Status: UNCONFIRMED

(Firefox :: General, defect)

Description

[Simounet]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150807094952

Steps to reproduce:

Wanted to use box-shadow to create a double border inside a centered parent.
Codepen: http://codepen.io/Simounet/pen/gpyXQO

<div class="container">
  <a href="#" class="double-border">Item 1</a>
</div>

.container {
    margin: 0 auto;
    width: 101px;
}

.double-border {
  padding: 5px 10px;
  background-color: red;
  box-shadow: 0 10px white, 0 20px red;
}


Actual results:

Get a strange 1px right border on the first box shadow with the color of the second one.
If the width of .container is an even number: everything is fine.
If it's an odd number: issue happened.


Expected results:

The color of the second box shadow on the right should be completely hidden by the color of the first box shadow.

Comment 1

[Simounet]

Codepen updated: http://codepen.io/Simounet/pen/gpyXQO

Comment 2

[Simounet]

Attachment: Screenshot of the bug on double box shadow

Comment 3

[tzi]

I reproduce this bug, but I have to change the container size to an even number: noted at 100px, 102px, 104px, 106px, etc.

Comment 4

[neatonk]

I am seeing this bug as well. 

In case it is helpful, I have been able to work around this bug by adding the following CSS to the example provided by Simounet above:


.double-border {
  display: block;
  -moz-transform: translateZ(0);
}


User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:62.0) Gecko/20100101 Firefox/62.0
Build ID: 20181001155545