0

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; }
Improve this question

1 Answer 1

Reset to default
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.

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.