iOS Position Fixed

This test have the following CSS:

#outer_box {
	background-color: whitesmoke;
	padding: 5px;
	position: relative;
	z-index: 1;
}

#inner_box {
	margin: 30px;
	background-color: lightgrey;
	position: relative;
	padding: 5px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	width: 80%;
	height: 80px;
	z-index: 1;
}

#fixed_box {
	background-color: orangered;
	width: 80px;
	height: 80px;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000;
	-webkit-transform: translate3d(0px,0px,1px);
}

	

In any browser the orange box should be in the top-left of the screen without problem, but in Safari for iOS, the box is hidden under the limits of the inner container, because it have the '-webkit-overflow-scrolling: touch;' property