0

Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.

Problem: enter image description here

Here's how the HTML/CSS looks.

.container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 100px 0px;
  margin-bottom: 56px;
  width: 100%;
}

container:after {
  content: "";
  background-image: url("$asset");
  background-size: cover;
  background-position: bottom;
  position: absolute;
  left: 0;
  top: -15px;
  width: 100%;
  height: 16px;
  border: 0;
  outline: 0;
}
<div class="container">
  <div class="bg"></div>
  <section>
   //Headings and Links here
  </section>
</div>

I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.

Beans
  • 11
  • 1
  • 2
    This sort of thing can happen for a range of reasons, can you include a complete reproducing example of the problem? – DBS Jun 30 '21 at 15:30
  • Can you share the css which resets *border* and *outline*? Putting this on [CodePen](https://codepen.io/pen) or [jsFiddle](https://jsfiddle.net/) can greatly help debugging this for you. – Peter Krebs Jun 30 '21 at 15:32
  • @PeterKrebs Please avoid suggesting external code hosts, for HTML/CSS/JS it is much better to use a functional snippet in the question itself. – DBS Jun 30 '21 at 15:35
  • @PeterKrebs Sure! I've updated the OP. – Beans Jun 30 '21 at 15:39
  • @Beans The outlines seem to come from the images at the top and bottom and maybe not from your CSS. Can you try without the images? Also you can remote debug browsers on mobile devices [Android](https://developer.chrome.com/docs/devtools/remote-debugging/webviews/), [iOS](https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7) if you like to debug it easier. – Peter Krebs Jun 30 '21 at 15:52
  • @DBS Ok sure for preservation purposes that's better – Peter Krebs Jun 30 '21 at 15:53
  • @PeterKrebs Completely agree that the artefacts look like they're part of the images, but upon closer inspect they aren't. This is backed up by the desktop and debug versions looking completely normal. – Beans Jun 30 '21 at 16:01

2 Answers2

0

Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.

  • Neither work - the screenshot above uses `none` as opposed to `0`. – Beans Jun 30 '21 at 15:52
  • see [should I use border none or border 0](https://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0) – Peter Krebs Jun 30 '21 at 15:53
  • Or, instead, if it's really the border, try making it transparent. This will make it invisble. –  Jun 30 '21 at 15:56
0

It's a chrome bug lads. Second answer here nailed it.

The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.

Beans
  • 11
  • 1