What could be the reason behind encountering the error message "Unknown property name" in a CSS

I need my ul li list to be scrollable on mobile devices.

Here is the HTML I am using:

<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>

These are the CSS classes I have applied:

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

This is the resulting view:

https://i.sstatic.net/gOowJ.png

However, when I view it on an Android device, the scrolling does not function properly.

After inspecting it in the Chrome debugger, I noticed an error in the CSS for scrollArea:

https://i.sstatic.net/DKiub.png

The error indicates that the property "-webkit-overflow-scrolling" is unknown. Any thoughts on why this error is occurring?

Answer №1

From my research, it seems that the -webkit-overflow-scrolling property is only effective in Safari (according to Safari's Supported CSS Properties documentation). If you're using a different browser, chances are this property will go unrecognized.

After reviewing sources over the past 3 years, I haven't come across any substantial evidence of widespread use of this property, indicating that even the most recent Safari versions may no longer support it.

Answer №2

The reason for this issue could be attributed to the -webkit-overflow-scrolling property, which is considered non-standard and may not be universally recognized by all web browsers.

Current Compatibility

Upon initial examination, it seems that only Safari Mobile 5+ and certain older versions of Chrome on Android are known to support this property. However, information on its current compatibility is not readily available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an undefined variable error with Ruby on Rails 6 Bootstrap after restarting the server

I'm facing an issue in rails 6 where upon server restart, I encounter an Error: Undefined variable. Oddly enough, if I comment out the SCSS variables in my files, refresh the page, then un-comment them and refresh again, everything works as expected a ...

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

My intro video animation is facing recording difficulties due to the autoplay policy in Google Chrome. It seems nearly impossible to capture it accurately. If only autoplay could function for an offline HTML file, my issue would be resolved. Unfortunately ...

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

Opening a PHP file without performing thorough validation in JavaScript can lead to security vulnerabilities

I am in need of some assistance. I am currently working on a form and seem to be encountering an issue. Whenever I click on the submit button without checking the full validation, it performs the PHP action. For instance, when I input a serial number into ...

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

JQuery script fails to load in the head section while dynamically generating an HTML page with JavaScript

Using JavaScript, I have created a new window dynamically and added some HTML code to it. However, when I try to insert a script link into the HTML head, it fails to load when the window is open. <script type="text/javascript"> function newWindo ...

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

After setting an integer value to a localStorage item: localStorage.setItem('a', 1) and checking its data type: typeof(localStorage.a) "string" it shows as a string. I then typecast it to an int for my purposes: parseInt(localStorage.a) My ...

How do I overwrite this calculation using JQuery?

I have a website: link There are two pages on my site that have the same div elements... I want one page to perform a certain calculation on the divs, and another page to perform a different calculation... New JavaScript Code: jQuery(document).ready(fu ...

Get the username from Parse instead of using the ObjectID

When using angular and Parse for JavaScript, I have implemented a search field where an admin can input the objectid of a user to display their details. However, I would like to modify this functionality so that the admin can enter the username instead of ...

Is the image inside a responsive div?

I'm currently working on my first website that I am proud of, and I am in the process of creating a background using CSS and an image. I want it to look exactly like the picture. . I have successfully achieved this (accomplished already), but the is ...

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

Creating a HTML5 Geolocation object using Python: A step-by-step guide

For my software analytics testing, I am looking to send GET requests with a geolocation object that includes variable timestamps and locations. The website utilizes the HTML5 navigator.getcurrent.location() function. While I can use the random module to r ...

How to use JQuery to retrieve multiple background image URLs from CSS styling

Initially, here is the CSS code that I am working with: background-image: url(/style_elements/img/first.png), url(/style_elements/img/second.png); I am trying to specifically target the second background image URL using jQuery: var item_img_url = item_i ...

When applying multiple classes with NgClass, use the property name instead of the class content

I am facing a challenge trying to add multiple classes (in this case 2) to a custom component that includes a list item component from MDBootstrap: App.module.ts <custom-list-component size="w-50"> <custom-list-item-component href="#">lis ...

Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automaticall ...

Issue with triggering the change event for <select> tag

Whenever the selected value of the drop down changes, the following code does not work as expected. Please make corrections if any errors are present. <!doctype html> <html lang="en"> <head> <meta charset="utf-8</scri ...

"AngularJS directive mandating the use of the required attribute for internal control

I've encountered a challenge with this specific issue. We are using a directive called deeplink, which contains the following code: restrict: 'E', require: 'ngModel', scope: { smDropdown: '=smDeeplinkDropdown', s ...