Is the functionality of defineProperty for elements malfunctioning on iOS6?

There seems to be an issue with JavaScript's defineProperty and __defineSetter not working on elements in iOS6. It functions correctly on all other browsers and earlier versions of iOS. Does anyone have more information on this?

<input id='Button1' type="button" value="test" onclick="test()">
<script>
Object.defineProperty(Button1,'width',{set: function(x){
    Button1.style.width=x},
    enumerable: true,
    configurable: true});

function test(){
  Button1.width="100px";
  alert(Button1.style.width);
  }
</script>

Check out the code in this fiddle:

http://jsfiddle.net/ghenne/pnL7p/

Answer №1

It seems that iOS 6 is the first Safari version to fix a bug that previously allowed certain native DOM properties to be overwritten, despite being non-configurable.

Throughout various versions of Safari, including mobile versions, the width property has been non-configurable. However, prior to iOS 6, Safari allowed the width property (and others) to be overwritten. With the latest version of Safari, this issue has been resolved.

Notably, Safari respects configurability for user-set properties but had a problem with preset properties. Chrome makes these properties configurable, while Firefox does not associate descriptors with the properties, avoiding the issue. I did not test IE.

The main problem appears to be Safari not respecting configurability for certain properties, but iOS 6 has addressed this issue.

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

When accessing files.fileName.path in formidable, it may result in returning undefined

The server is unable to save the file. The path property is giving back an undefined value. const saveImage = (req, res) => { const form = formidable.IncomingForm(); form.uploadDir = `./images`; form.keepExtensions = true; form.parse(req, (er ...

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

During server and browser builds, NextJs encounters a 404 error when trying to access files named _ssgManifest.js and _buildManifest.js. Additionally, the file named _

I recently deployed a NextJs application on a digitalocean droplet running Ubuntu 22.04. "next": "12.2.3", "react": "18.2.0", Encountering a 404 error for the following files: _ssgManifest.js, _buildManifest.js, an ...

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Encountering a deployment issue with my Next.js 13 application on Vercel. I recently implemented the Parallel Routes feature of Next in my codebase. While pushing the changes to create a new pull request on GitHub, the branch's deployment on Vercel is ...

Loss of precision occurs when converting a BigDecimal value from a JSON

After making a network call, the backend is sending the following data: "uom" : "EA", "qty" : 1.123456789012345678 However, when this information reaches the frontend and is logged using console.log: { qty: 1.1234567890123 ...

What is the best way to implement multilanguage support in nodejs without relying on cookies or external modules?

Currently, I am in the process of transitioning all my projects to node.js in order to enhance my JavaScript skills. Using Node.js along with the Express module, one of my clients who runs a translation company has requested that I incorporate two language ...

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

What caused the failure of the statement oDiv[i].style.z-index = arr[i][3]?

After reviewing arr[i][3], I confirmed it was accurate. However, I encountered an issue with one of the statements. The code snippet is displayed below: for(var i = 0; i<oDiv.length;i++){ arr.push([getAttr(oDiv[i],"left"),getAttr( ...

What is the process for linking an HTML document to another HTML document within a div using jQuery?

Check out my HTML code: <!DOCTYPE html> <html> <head> <title>Hilarious Jokes!</title> <meta charset="utf-8"> <link href="final%20project.css" rel="stylesheet"> <script src=" ...

Using JQuery to encapsulate the contents of a variable

I am working with a variable that stores HTML retrieved from an HTML5 SQL database. When I use the .append() method to add it to a DOM element, everything works as expected. However, I want to wrap the HTML contents before appending them, so I tried using ...

What steps can I take to generate 12 random div elements using jQuery out of a pool of 30?

Currently, all the words are displaying, but I would like the script to randomly select 12 out of the 30 words var randomdivs = $("wordstyle").get().sort(function(){ return Math.round(Math.random())-0.5; }).slice(0,12) $(randomdivs).show(); The follo ...

What is the best way to dynamically update a state that is deeply nested?

Is there a way to update the object using key: 1311 and retrieve the updated state while not knowing its exact location but only its key value? state = { iow: [ { key: 1, iow_description: "EARTH WORK", unit: null, rate: nul ...

Passing PHP data to a JavaScript file using JSON格式

I have a query regarding how to pass php variables and send their values to a js file using json. Here is what I currently have: <?php $data = array('artist' => $artistname, 'title' => $songname); echo json_encode($data); // ...

Utilizing JavaScript to showcase information retrieved from the database

After implementing this code example for a cascaded drop-down menu, I would like to incorporate the names of individuals residing in a specific city. How can I achieve this functionality once a city is selected? Demo link: Complete code snippet below: ...

What is the best way to display a placeholder instead of the state's value when a page loads?

I'm having trouble displaying the placeholder of an input instead of its state value. When the page loads, it shows an empty select box because the testType state is null initially. How can I make sure that only the placeholder is shown instead of the ...

Leverage AngularJS templates across multiple locations

I currently have a table that showcases a list of products. This table is utilized on both the "All products" page and the "My products" page. Here is a snippet of the table code: <tr ng-repeat="product in products> <td>{{product.id}}</td ...

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Can someone help me with this error I'm encountering? I am fairly new to typescript, so I assume it has something to do with that. Below is the code snippet in question: Any guidance would be greatly appreciated. const Pizzas: React.FC = () => { ...