-webkit-overflow-scrolling：touch;不适用于iPad或黑莓手机

Question

请帮我解决这个问题。我使用css的overflow属性来显示视图中的隐藏内容，但滚动不在任何设备上工作，但它在桌面浏览器（safari和chrome）上工作正常。 这是我的代码：

html file:
  <div class="ExpenseDetail">
            <div class="ExpenseRow" ng-repeat="DocLineItem in DocLineItems">
                <div class="ExpenseInfo">
                    <p id="ProducName"><b>{{DocLineItem.ProductName}}</b></p>
                    <p id="Quantity"><b>{{DocLineItem.Quantity}}</b></p>
                    <p id="UOM"><b>{{DocLineItem.UOM}}</b></p>
                    <p id="ExpensePrice"> {{DocLineItem.Value}} {{DocLineItem.Currency}} </p>
                </div>
               <div id="ExpenseDesc" align="center">
                    <p>{{DocLineItem.Description}}</p>
                </div>
            </div>
        </div>


css file:
.ExpenseDetail {
    position: absolute;
    top: 53.3%;
    left: 0%;
    width: 100%;
    height: 47%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    vertical-align: middle;
}

.ExpenseDetail > .ExpenseRow {
    border-bottom: 1px solid #d3d3d3;
    padding-left: 3.5%;
    padding-top: 4.3%;
    font-size: 3vw;
}



.ExpenseDetail > .ExpenseRow > div {
    display: block;
    vertical-align: middle;
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo {
    width: 100%;
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo > p {
    display: inline-block;
    margin: 0px;
    padding: .7%;
    /* line-height: 50%;*/
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo > #ProducName {
    left: 0%;
    width: 25%;
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo > #Quantity {
    left: 25%;
    width: 17%;
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo > #UOM {
    left: 45%;
    width: 10%;
}

.ExpenseDetail > .ExpenseRow > .ExpenseInfo > #ExpensePrice {
    float: right;
    color: white;
    padding: .7%;
    text-align: center;
    padding-right: 2.5%;
    padding-left: 2.5%;
    background: #0270D7;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #0f0000;
    margin-right: 5%;
    width: auto;
    min-width: 20%;
}

.ExpenseDetail > .ExpenseRow > #ExpenseDesc {
    padding-left: .7%;
    padding-right: .7%;
    width: 95%;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 130%;
    text-align: justify;
    text-justify: inter-word;
}