1

I am trying to overlay an image using a pseudo-element that is aligned to the bottom of a parent element. Then parent then hides part of both the image and the pseudo element using overflow: hidden. This should make the parent clip both the image and the pseudo element at the same place. However the image extends beyond the pseudo element by 1px. This happens in both Chrome and IE at specific breakpoints.

I inserted the code to stackoverflow but I can not reproduce using their code viewer. I can however reproduce on codepen using a screen width of 800px: https://codepen.io/dwigt/pen/PXyrXq

.wrapper {
  margin: auto;
}

.item {
  background: lightgrey;
  max-height: 500px;
  min-height: 500px;
  height: 100%;
  max-width: 800px;
}

.image {
  overflow: hidden;
  max-height: 250px;
  position: relative;
}

.image img {
    max-height: 100%;
    width: 100%;
    position: relative;
}

.image::after {
    z-index: 10;
    content: "";
    position: absolute;
    left: -50%;
    top: calc(80%);
    width: 200%;
    height: 200%;
    display: block;
    background: lightgrey;
    border-radius: 100%;
}
<div class="wrapper">
  <div class="item">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1547039963-8bebea5ff026?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1933&q=80"/>
    </div>
    <div class="text">
      Lorem Ipsum
    </div>
  </div>
</div>
dwigt
  • 611
  • 1
  • 8
  • 18
  • add display block to img – Pete Jan 11 '19 at 15:18
  • Hmm tried adding display: block to the img and .image but it does not seem to have an effect. – dwigt Jan 11 '19 at 15:20
  • 1
    I cannot replicate in either your codepen or the snippet - reopened for you if that is not the cause – Pete Jan 11 '19 at 15:20
  • Thank you Pete. For some reason the error can not be reproduced on stack overflow. However I can reproduce on Codepen in Chrome using the device toolbar set to a width of 800px. – dwigt Jan 11 '19 at 15:22
  • 2
    I can reproduce in Chrome, but the problem disappears when zooming in above ~200%. I think this is probably a rendering bug rather than a problem with your CSS – MTCoster Jan 11 '19 at 15:27

0 Answers0