Why I get error Unknown property name in css class?

Question

I want to make my ul li list scrollable on device.

So I have this 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>

Here is css classes:

.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;
    }

That genarete this view:

But the problem that if I open it in android device the scorlling dose not work.

When I open the debugger I on chrome I see error in scc scrollArea :

On -webkit-overflow-scrolling property I get error Unknown property name.

Any idea why I get the error on -webkit-overflow-scrolling property?

James Donnelly · Accepted Answer · 2016-04-20 15:39:53Z

1

As far as I can tell, -webkit-overflow-scrolling only works in Safari (as per Safari's Supported CSS Properties documentation). If you're not using Safari, this property will most likely not be recognised.

I can't find any solid reference to this property in the last 3 years, so it's quite possible that even the latest versions of Safari aren't supporting it any more, either.

answered Apr 20, 2016 at 15:39

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rion Williams · Accepted Answer · 2016-04-20 15:44:57Z

0

This is likely because the -webkit-overflow-scrolling property is a non-standard property and as a result it may not be recognized by all browsers.

Current Support

enter code here

A cursory look appears to only indicate that Safari Mobile 5+ and some earlier versions of Chrome on Android supported the property. I can't find any definitive response regarding current support.

edited Apr 20, 2016 at 15:44

answered Apr 20, 2016 at 15:39

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Collectives™ on Stack Overflow

Why I get error Unknown property name in css class?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related