0

I have a fixed image within a div that has an overflow and border radius applied.

When testing in Chrome, grid lines bleed outside the circle, also revealing the image. I'm only seeing this behaviour in Chrome, and I've been unable to find a solution. Is there a workaround?

Code:

.parallax-container {
      position: relative;
      overflow: hidden;
      height: 500px;
      width: 500px;
      top: 300px;
    }

    .parallax {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 50%;
        overflow: hidden;
    }

    .parallax img {
      display: block;
      position: fixed;
      left: 0%;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      -webkit-transform: translate3d(-50%, -200px, 0px);
      transform: translate3d(-50%, -200px, 0px);
    }

    .parent{
      height: 3000px;
    }

  <div class="parent"> 
    <div class="parallax-container">
      <div class="parallax">
        <img src="https://unsplash.it/200/300/?random" />
      </div>
    </div>
 </div>

Fiddle:

https://jsfiddle.net/y9ge48Lo/

Screenshot:

Strange rendering in Chrome on fixed image

3rdthemagical
  • 5,271
  • 18
  • 36
milesholt
  • 161
  • 1
  • 9
  • This code is a kind of dark magic! Parallax effect is made in another way. – 3rdthemagical Apr 04 '17 at 11:05
  • It's based on this approach - http://materializecss.com/parallax.html – milesholt Apr 04 '17 at 11:44
  • In your example parallax effect is made with help of js. And there is no `position: fixed`. – 3rdthemagical Apr 04 '17 at 13:18
  • The parallax effect isn't the issue, which is why I've left out the js. The issue is with the rendering on Chrome. In the Fiddle, the overflow should contain the child element (the image), which it does in Safari and Firefox. But with Chrome, there are strange lines/bars appearing outside. Position:fixed is applied to the image (.parallax img). – milesholt Apr 04 '17 at 13:47
  • http://i.imgur.com/86ROLgi.png – 3rdthemagical Apr 04 '17 at 14:02
  • Yes with Materialize, their example uses 'absolute'. But I'm trying to accomplish it with the image being ‘fixed’. – milesholt Apr 04 '17 at 14:39
  • 1
    I think chrome has a rendering bug. In oter brousers this 'parallax' doen't work - and it is okay. Win 10. Opera = Chore: [not working](http://i.imgur.com/6MPIgrJ.png); FF: [not working](http://i.imgur.com/Kc4Vg2p.png); Edge: [not working](http://i.imgur.com/aFk4ZlW.jpg). My suggestion is to look for some others way to make parallax effect. Position fixed into absolute element will not work. I will be happy if someone can dissuade me from this, but I do not believe that it will work. – 3rdthemagical Apr 04 '17 at 19:52
  • Ok, thanks for the advice. I'll look at some other options for the moment then and will report this to the Chromium bug page (if it's not already listed). – milesholt Apr 05 '17 at 09:32

0 Answers0