CODEWITHSUNDEEP
htmlcssoverflowmicrosoft-edgebox-shadow
abagshaw
abagshaw

Reputation: 6582

MS Edge: overflow: hidden not working on box-shadow

I have applied a large box-shadow to a position: absolute <div>. Its parent <div> has overflow: hidden set which (from my understanding) should hide any overflowing box-shadow – and this works just fine on Chrome but for some reason not on MS Edge.

See the example here:

.outerbox {
  width: 600px;
  height: 600px;
  background-color: red;
}

.innerbox {
  width: 300px;
  height: 300px;
  margin-top: 150px;
  margin-left: 150px;
  display: table;
  background-color: #fff;
  position: fixed;
  overflow: hidden;
}

.shadowbox {
  position: absolute;
  left: 50px;
  width: 200px;
  top: 50px;
  height: 200px;
  box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
  <div class="innerbox">
    <div class="shadowbox">
    </div>
  </div>
</div>

https://jsfiddle.net/8u43mztw/

When viewed on Chrome it appears as one would expect like this:

Viewed on Chrome

But when viewed on MS Edge it appears as follows:

Viewed on MS Edge

For some reason on Edge, setting overflow: hidden on the box parent to the box on which the box-shadow has been applied has no effect. Chrome has no trouble hiding the overflowing box-shadow. Am I doing something wrong here, or is there a workaround?

Upvotes: 2

Views: 1834

Answers (1)

itacode
itacode

Reputation: 3787

In Firefox also. Try to remove display: table; from .innerbox: in Firefox works fine.

.outerbox {
  width: 600px;
  height: 600px;
  background-color: red;
}

.innerbox {
  width: 300px;
  height: 300px;
  margin-top: 150px;
  margin-left: 150px;
  background-color: #fff;
  position: fixed;
  overflow: hidden;
}

.shadowbox {
  position: absolute;
  left: 50px;
  width: 200px;
  top: 50px;
  height: 200px;
  box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
  <div class="innerbox">
    <div class="shadowbox">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions