0

TL;DR: I've been trying to add a white inset box shadow to highlight the bottom of a div in nav. When resizing the page, as the nav resizes, 1px white borders appeared on the left and right sides of the div even though they shouldn't. These left and right borders did not show up while the div was at full size. (images posted below)

How should I be getting rid of these left and right borders and why does this occur? (currently am using clip-path to trim the sides off the div)

I've been trying to add a colored highlight of sorts to the bottom of divs on my navbar. My approach for this has been to add inset box shadows to these divs as follows:

.div {
  /* using black for this example */
  box-shadow: inset 0 -0.25rem black;
  padding: 1rem;
  display: inline-block;
}
<div class="div">A div</div>

This seems to achieve what I want, but for some reason, whenever I try shrinking the page in responsive mode or viewing the page on mobile, I can see 1px wide white borders on the left and right edges of the div that go away when I either disable the box shadow or replace the 0 horizontal offset above with a non-zero value.

These side borders also only appear at when resizing the page and reducing the width to the point where the nav items start to shrink. They also seem to continuously appear and disappear as I resize the page, sometimes only on the left or right.

Here's a screenshot I captured with the page width reduced in responsive mode, where the shadow can be seen on both edges:

screenshot

And here's what it normally looks like:

screenshot

My solution to avoid this was to add a clip path to the div to trim the left and right edges, but I was hoping to understand why these even showed up in the first place and only when resizing the page. And is there a better way to fix this instead of trimming the edges of the div off?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Anirudh
  • 1
  • 1
  • Please update the demo above to show your problem. See [ask] and take the [tour]. – isherwood Jul 10 '23 at 13:54
  • Hello, the funny is if I put 0 (chrome, firefox) on my computer (mac) it's working. If I put, let say 0.01rem, I have the white border! With 0 if I zoom 200%, portrait mode, 390pxx844px, I can see like black blur lines each sides, but really not noticeable. What about putting border-bottom: 0.25rem solid white; instead of your inset? – pier farrugia Jul 10 '23 at 14:17
  • Hey! My page currently requires these to be hidden at first and only show up on hover. I tried transparent borders initially, but the borders initially showed up as white before transitioning to transparent on page load. I have multiple stylesheets and one of them _(tailwind compiled stylesheet)_ sets border colors to white. I could also see that the body onload event only triggered after the borders changed to transparent, so I chalked it up to a loading issue. I didn't want to build a preloader in, so I decided to try box shadows instead. – Anirudh Jul 10 '23 at 14:27
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Jul 10 '23 at 22:30

1 Answers1

0

Maybe a gradient solution will not give you such issue

.div {
  padding: 1rem;
  display: inline-block;
  
  background: linear-gradient(black 0 0) bottom/100% .25rem no-repeat
}
<div class="div">A div</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415