CSS overflow hidden hides content incorrectly while other element's transforming

Issue #10150219 • Assigned to Rick J.

Details

Author
Drake X.
Created
Dec 10, 2016
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

http://codepen.io/anon/pen/ZBPXQB](http://codepen.[http://codepen.io/anon/pen/ZBPXQB](http://codepen.io/anon/pen/ZBPXQB)

 

.outer {
  width: 150px;
  height: 30px;
  background: blue;
  margin-left: 50px;
  border-radius: 20px;
  overflow: hidden;
}
.inner {
  width: 40px;
  height: 20px;
  background: red;
  position: relative;
  right: 20px;
}
.trigger {
  position:fixed;
  display: inline-block;
  color: white;
  background: lime;
}
.filler {
  position:absolute;
  top:100px;
  height:12345px;
  background-color:darkgreen;
}

 

<div class="trigger">hover me 1234</div>
<div class="outer">
  <div class="inner"></div>
</div>
<div class="filler">filler</div>

 

 

Edge version: 38.14393.0.0
OS: Microsoft Windows [version 10.0.14393]

Steps to reproduce the problem:
(1) Create an round cornered element with overflow:hidden and some overflowed content
(2) Make other element performs css transform in the page

What is expectet:
The hidden content should be hidden with round cornered shape.

What happens instead:
After the transforming, the hidden content will show as a rectangle shape.

demo: http://codepen.io/DrakeXiang/pen/mOjbgz

Other browsers tested:
chrome: FAILE 54.0.2840.87 m (64-bit)
Firefox: OK 50.0.2

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

    Changed Assigned To to “Rick J.”

    Changed Steps to Reproduce

You need to sign in to your Microsoft account to add a comment.

Sign in