User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36 Steps to reproduce: 1. Go to https://jsfiddle.net/jw4ysk73/ or put the following in foo.html and open it in Firefox Nightly or earlier versions <div style="left: 400px; position: absolute; " id="foo"> <div style="transform: translateX(-50%);"> <div style="font-size: 20px;"> <div>Foo</div> </div> </div> <div style="text-align: center; transform: translateX(-50%); "> <div style="display: inline-block; border-left: 10px solid black; width: 10px; height: 400px;"></div> </div> </div> <script> var left = 400; setInterval(function(e) { left -= 5; document.getElementById('foo').style.left = left + 'px'; }, 1000); </script> Actual results: Rendering artifacts are left behind the object when it moves to the left, see attached reproduction video I can reproduce this on: Linux 4.4.0-53-generic #74-Ubuntu SMP Fri Dec 2 15:59:10 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux and Linux 3.16.0-5-amd64 #1 SMP Debian 3.16.51-3+deb8u1 (2018-01-08) x86_64 GNU/Linux but not on Windows 10 Expected results: No rendering artifact leftovers

I can also reproduce on Windows10 Nightly61.0a1 x64 if css using font-family : "MS PGothic". Steps To Reproduce: 1. Open https://jsfiddle.net/jw4ysk73/8/ 2. Reduce the height of live view pane so that vertical scroll bar will appear. if not repeat step2, try various height of the pane

Regression window: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=edac8cba9f78&tochange=0204febd3146 Suspect: 052685e62b34 Matt Woodrow — Bug 926268 - Don't include the full frame bounds in nsDisplayBorder if we're only painting one side. r=roc