Background color make phantom borders appear when resizing window

Question

I'm designing a block that shows a car with information, for this problem particularly I've only left the important thing, the default background (image):

The problem is with the background color, it changes with the color received in the view -red in the example-. Everything works like a charm until I resize the window (using Toggle device toolbar) or when I test it in the final device (1920x1080). If you do this change, you'll see phantom borders appear:

I've tried adding box-shadow property and with some resolutions the result is the same:

box-shadow: inset -3px -3px 0px 8px rgb(255, 255, 255);
-webkit-box-shadow: inset -3px -3px 0px 8px #fff;
-moz-box-shadow: inset -3px -3px 0px 8px #fff;
box-shadow: inset -3px -3px 0px 8px #fff;**

I'm using:

Google Chrome
Android, Samsung device that has a 1920x1080 resolution
If you don't get the borders, just play resizing the window and they'll appear.

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') no-repeat;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
  /*     box-shadow: inset -3px -3px 0px 8px rgb(255, 255, 255); */
  /*    -webkit-box-shadow: inset -3px -3px 0px 8px #fff;  Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  /*    -moz-box-shadow: inset -3px -3px 0px 8px #fff;  Firefox 3.5 - 3.6 */
  /*    box-shadow: inset -3px -3px 0px 8px #fff; */
}

Complete JSFiddle here (Updated 25/6): https://jsfiddle.net/1uod0ptb/19/

Takit Isy · Accepted Answer

My last idea is to use the ::before and ::after pseudo-element and a CSS variable…
The ::before using this variable color, is positionned to let some space around itself:

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  position: relative; /* ADDED THIS */
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg { /* Modified a little here */
  position: relative;
  height: 105px;
  width: 287px;
  border-right: 1px solid #e5e5e5;
  opacity: 0.6;
}

.listitem-bg::before { /* Added all this */
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background-color: var(--bg-color); /* Using CSS var here */
  content: "";
}

.listitem-bg::after { /* Added all this */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('https://i.imgur.com/FsTDxBK.png');
  content: "";
}

⋅ ⋅ ⋅

It just appeared to me that you're using position: absolute; without any position: relative element.
Even if it doesn't correct your problem, you should use that!

Please tell me what happens if you use that code:

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  position: relative; /* ADDED THIS */
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg { /* Modified a little here */
  position: absolute;
  height: 105px;
  width: 287px;
  border-right: 1px solid #e5e5e5;
  background-image: url('https://i.imgur.com/FsTDxBK.png');
  opacity: 0.6;
}

⋅ ⋅ ⋅

I tried to slightly oversize the image with background-size: 101% 101%;.
I've also added background-position: center center and background-origin: border-box.
All of these can be used in the sorthand background:

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') center center / 101% 101% no-repeat border-box;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
}

⋅ ⋅ ⋅

I also wanted to try something different and reset some styles.

I only used * { margin: 0; padding: 0; } and the problem seems to have disappeared for me:

* {
  margin: 0;
  padding: 0;
}

.listitem {
  height: 200px;
  padding: 6px 3px 10px 10px;
}

.listitem-block {
  width: 362px;
  float: left;
  margin-right: 10px;
}

.listitem-body {
  height: 125px;
  padding: 0px 5px 5px 6px;
  width: 290px;
}

.listitem-content {
  position: absolute;
  width: 290px;
  height: 120px;
}

.listitem-bg {
  height: 105px;
  background: #777 url('https://i.imgur.com/FsTDxBK.png') no-repeat;
  width: 287px;
  position: absolute;
  opacity: 0.6;
  border-right: 1px solid #e5e5e5;
}

I hope one of these methods will work for you!

Background color make phantom borders appear when resizing window

Answers (2)

Related Questions