css Mask不会跟随滚动条

Question

我到处搜索，但我找不到任何问题。 我有一个div，里面有一个面具。

var campaignService = user.getService('CampaignService', 'v201609')

//create selector 
var selector = {
    fields: ['Id', 'Name'],
    ordering: [{field: 'Name', sortOrder: 'ASCENDING'}],
    paging: {startIndex: 0, numberResults: AdwordsConstants.RECOMMENDED_PAGE_SIZE}
}

campaignService.get({serviceSelector: selector}, function (error, result) {
    console.log(error, result);
}) 

#test {
  position: absolute;
  top: 60px;
  bottom: 30px;
  left: 2px;
  right: 2px;
  height: 100%;
  z-index: 113;
  overflow-y: inherit;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.85, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0)));
}

面具很好地位于clientHeight的底部，但是当我使用键盘键滚动时，面具将不会移动......

请帮忙！