Cannot retrieve style information using getComputedStyle on iOS devices

Hi there! I've created a function that is supposed to return a specific computed style from a given element. It seems to be working perfectly fine in all desktop browsers that I've tested, but unfortunately, it's not functioning properly in mobile Safari. When I log the result of the getComputedStyle call to the console, it shows as "[object CCStyleDeclaration]", which is good news. However, when I try to log the result of the getPropertyValue call, it just returns "null" instead of the correct style. Any suggestions or help would be greatly appreciated. Thank you!

Utils.getStyle = function(element, style){
    var strValue = "";
     if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(style);
     }else if(element.currentStyle){
        style = style.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = element.currentStyle[style];
    };
    return strValue;
};

Answer №1

Regarding the comparison between window.getComputedStyle and

document.defaultView.getComputedStyle
, I have implemented a custom function in my personal library:

getComputedStyles: function(el) {
    var styles = el.currentStyle || getComputedStyle(el, null);
    return styles;
}

Adapting to fit your function signature:

Utils.getStyle = function(el, styleProp) {
    var styles = el.currentStyle || getComputedStyle(el, null);

    // Avoid 'Cannot read property X of null' error
    if(styles !== null) {
        return styles[styleProp];
    } else {
        return null;
    }
}

Unfortunately, I am unable to test this on iOS at the moment. I would be keen to hear feedback on its efficacy.

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

Error message on Swift IOS 13: "Unable to establish connection with Itunes Connect"

I am currently facing issues with implementing IAP on IOS 13.5. Interestingly, the same code worked perfectly in a previous app when tested on the same device. Internet connection is stable, certificates are in order, IAP status in Itunes Connect is "Ready ...

extracting a value from an array

I've been working on a dropdown list that includes checkboxes and values. When I check a checkbox, the corresponding item's ID is added to an input on the right panel and its value is appended as a tag on the same panel. If I uncheck a checked ch ...

My eCommerce website is currently experiencing some technical difficulties that need to be addressed

I'm in need of assistance with a particular error I encountered. I was following an ecommerce example application and everything seemed to be going smoothly until I clicked on "Shop Now." At that point, I received the following message: Server Error T ...

Fetching image files from Angular JS in a servlet

On my website, users have the ability to upload images. I am using AngularJS to post the data to a specific URL via a POST request. My question is, how can I retrieve this data in a Java servlet? My goal is to save the uploaded image in a database. Is this ...

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

Store the ID of a div in a variable

Currently, I have transformed rock paper scissors from a terminal/console game using prompts and alerts to something playable in a web browser through the use of the jQuery library. In order to achieve this transition, I created images for each hand - roc ...

Step-by-step guide to adding a skew overlay to your video

I am experimenting with creating a skewed overlay on a video playing in the background at full width. Currently, the skew overlay is functioning perfectly. What if I want it to appear in the bottom-right corner instead of the top-left corner? Would I need ...

Guide to sorting by two parameters in Angular

Is it possible to sort an angular table by two parameters? See the example below: 1-2 1-3 1-1 2-9 2-6 2-1 The desired output should be: 1-1 1-2 1-3 2-1 2-6 2-9 this.sortedData.sortingDataAccessor = (item, property) => { if (item[property]) { re ...

Encountering Issues with Loading Stripe Checkout Session Window

My register process involves a two-step procedure where a user fills out a web form to create a user account and then gets redirected to a Stripe checkout page for payment details. However, I'm encountering an issue with the Stripe Checkout window not ...

Connect the scroll wheel and then proceed to scroll in the usual way

There are two div elements with a height and width of 100%. One has the CSS property top:0px, while the other has top 100%. I have implemented an animation that triggers when the mousewheel is used to scroll from one div to the other. The animation functi ...

Modify the href link before submitting the request

Here is the code snippet that I am working with : <a class="myLink" href='http://www.website.it/'>Link</a> <script type="text/javascript"> var stringToSend = ""; $('.myLink').click(function() { string ...

I am unable to reach my pages through their URL directly, I can only access them through links within Next.js

My next JS application runs smoothly during development, but encounters an issue when published online. I can only access the pages through links on the home page that direct to those specific pages. For instance, trying to navigate directly to www.examp ...

Determine if the date of birth in JavaScript is within the last 110 years

I am dealing with an array of dates that looks like this: var dateArray = ["1965-12-29", "1902-11-04", "1933-10-21", "1983-10-16"]; My goal is to check and calculate each date of birth element to determine if the age is less than 110 years old based sole ...

the modal body is taking longer than expected to load with ajax

I have a unique modal that I'm filling with dynamic data through an Ajax GET request upon modal load. Interestingly, the data is not fetched or added to the modal body unless I trigger an alert first. The structure of my modal is as follows: <div ...

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Encountering an error while trying to deploy my first node project on Heroku. Here is the error message: 2020-09-29T04:24:09.365962+00:00 app[web.1]: production 2020-09-29T04:24:09.415266+00:00 app[web.1]: server is listening at port 40890 2020-09-29T04:24 ...

Implementing a delegator with ExtJS 4.1: A step-by-step guide

As a newcomer to javascript, I've recently been tasked with maintaining an application built in Sencha ExtJS 4. One of the components I need to modify is a tooltip feature that displays information when hovering over certain elements. This tooltip app ...

The search feature on mobile devices is currently malfunctioning

The jQuery code below is used to search for products. It works perfectly in desktop view, but the responsive mobile view does not seem to be functioning correctly. Can someone assist me with fixing this issue? $("#search-criteria").keyup(function() { ...

What are some strategies for preloading a webpage to improve loading times?

My webpage contains multiple images, but the browser loads them one by one when a user visits the page. I would like to display a "loading" gif in the center of the page first and only show the entire webpage once all the images have been downloaded. Is ...

Is there a way to invoke a function from a component that is neither a direct child nor parent component?

Module X let searchQuery = .... retrieveData(searchQuery); Module Y //implementing the use of Module X's parameter ...

Navigating collisions in the ECS architecture: Best practices

I'm currently developing a game using typescript and the ECS design pattern. One of the challenges I'm facing is handling collisions between different entities within the game world. I have an entity called Player which comprises several componen ...