CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-11
ami91
ami91

Reputation: 1354

File Input in IE 11 makes sibling DIV disappear on click or right click

I have the following HTML and CSS.

HTML 

<div class="parent">
  <div class="child">Sample Text</div>
  <input type="file"></input>
</div>

CSS 

.child {
  background-color: #231f20;
  color: #FFFFFF;
  display: block;
  height: 100%;
  width: 100%;     
}
.parent {
  display: block;
  height: 32px;
  margin-top: 10px;
  width: 100%;
  -moz-border-radius: 0 0 0 0;
  background: none;
  border: none;
  line-height: 32px;
  position: relative;
  overflow: hidden;
  direction: ltr;
  cursor: pointer;
  text-align: center;
  color: #333;
  font-weight: bold;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;  
}
.parent input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: 300px solid transparent;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  filter: alpha(opacity=0);
  -o-transform: translate(-300px, -300px) scale(10);
  -moz-transform: translate(-800px, 0) scale(10);
  cursor: pointer;
  height: 100%;
}

The fiddle for this is available here : http://jsfiddle.net/20vj44L9/

I notice that when I click on the file input button, the inner div disappears. This seems to happen only on Internet Explorer (IE) 11. It works on Chrome/FireFox and even on IE 10. I tried to debug using F12 developer tools on IE 11 but I am not able to figure out what the issue might be. Does anyone have any ideas that may help? Thanks.

Upvotes: 2

Views: 1080

Answers (1)

Sampson
Sampson

Reputation: 268424

I was able to reproduce the issue with your fiddle, and I proceeded to reduce it even further. The issue here is with the top and bottom borders of the input control itself. These cause an invalidation error immediately upon giving focus to the element, thus pushing the sibling DIV up along the y-axis. You can confirm this by using the element highlighter in the F12 Developer tools.

In the below image I have reduced the border size of the input to 100px, this results in the neighboring DIV being placed 100 pixels above the input once the input is focused. You cannot see the element any longer though because the parent has a fixed height, and overflow set to hidden.

enter image description here

Removing the top and bottom borders resolves this issue.

.parent input {
  position: absolute;
  top: 0; right: 0; opacity: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
}

I will file an issue internally on this to have our Layout team give it some consideration. I'll be attaching this fiddle to the ticket: http://jsfiddle.net/jonathansampson/d74br18p/.

Upvotes: 2

Related Questions