为什么我得到错误css类中的未知属性名称？

Question

我想让我的ul li列表在设备上滚动。

所以我有这个HTML：

<div class="scrollArea ">
    <ul class="selectableListItems" ng-repeat="inspectionReview in inspectionReviews">
        <li class="row col-sm-6">
            <input type="checkbox" ng-model="inspectionReview.IsNormal" />
            {{inspectionReview.InspectionItemName}}
        </li>
    </ul>
</div>

这是css类：

.selectableListItems {
    list-style-type: none;
    padding: 5px 10px 0px 0px;
}

.scrollArea {
    height: 150px;
    overflow: auto;
    -webkit-overflow-scrolling: auto;
    overflow-x: hidden !important;
    direction: ltr;
    border-radius: 3px;
    border-style: solid;
    border-color: #dddddd;
}

    .scrollArea input[type="text"] {
        border: 1px;
        direction: rtl;
    }

    .scrollArea ul {
        direction: rtl;
    }

认为这种观点：

但问题是，如果我在Android设备中打开它，那就不会起作用。

当我在chrome上打开调试器时，我在scc scrollArea中看到错误：

在-webkit-overflow-scrolling属性上，我收到错误Unknown property name。

我知道为什么我会在-webkit-overflow-scrolling属性上收到错误吗？

Answer 1

据我所知，-webkit-overflow-scrolling仅适用于Safari（根据Safari's Supported CSS Properties documentation）。如果您不使用Safari，则很可能无法识别此属性。

在过去的3年里，我找不到任何对此属性的可靠引用，因此即使是最新版本的Safari也很可能不再支持它。

Answer 2

这可能是因为-webkit-overflow-scrolling属性为a non-standard property，因此可能无法被所有浏览器识别。

当前支持

粗略的外观似乎只表明Safari Mobile 5+和Android上的某些早期版本的Chrome支持该属性。我无法找到关于当前支持的任何明确答复。