Rendering overlay to div with border radius and overflow: hidden (Chrome only)

Question

Fiddle here: https://jsfiddle.net/mengma/8k5pekrr/1/

This problem is Chrome only - overlay won't cover the whole screen. Removing either the border-radius or overflow css will not have this issue. Any idea to by pass it? Seems to be a bug with latest Chrome (not seeing it before)

 <div class="dialog">
     <div>
       dialog <a href="http://google.com">click</a>
     </div>
     <div class="fadeMe"></div>
  </div>

    div.dialog {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 20px;
        border-radius: 4px;
        border: none;
        left: 20px;
        z-index: 12;
        border: solid 1px #000;
        overflow: hidden;
    }


    div.fadeMe {
        opacity: 0.5;
        background: #ccc;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
        position: fixed;
    }

Steve MacDonald · Accepted Answer · 2017-10-16 18:09:31Z

1

I was experiencing the same issue. I discovered that adding a transparent border to your dialog that is larger than your border-radius will fix it.

div.dialog { border: solid 5px transparent; }

In your case, it will replace your black 1px border, which also may not be desirable.

answered Oct 16, 2017 at 18:09

Steve MacDonald

512 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering overlay to div with border radius and overflow: hidden (Chrome only)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related