p5.Element.style() does not correctly update the width, height, left, and top properties if they are changed in the CSS.

[msed21]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

p5.js version

1.4.1

Web browser and version

Chrome 103.0.5060.66 (Official Build) (64-bit) (cohort: Stable)

Operating System

Windows 10

Steps to reproduce this

Steps:

1. Run the following piece of code
2. Notice the properties do not reflect their actual values.

Snippet:

function setup() {
  createCanvas(800, 800);
  this.testButton = createButton('TEST');
  this.testButton.position(0, 0);

  this.testButton.style('width', '25%');
  this.testButton.style('height', '25%');
  this.testButton.style('left', '50%');
  this.testButton.style('top', '50%');

  console.log(`.width: ${testButton.width} -> actual: ${testButton.elt.offsetWidth} - (CSS 25%)`);
  console.log(`.height: ${testButton.height} -> actual: ${testButton.elt.offsetHeight} - (CSS 25%)`);
  console.log(`.left: ${testButton.left} -> actual: ${testButton.elt.offsetLeft} - (CSS 50%)`);
  console.log(`.right: ${testButton.top} -> actual: ${testButton.elt.offsetTop} - (CSS 50%)`);
}

function draw() {
  background(220);
  fill(0);
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[msed21]

Related to issue #5525