Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MutationObserver triggers changes on unchanged inline styles #3305

Closed
just-boris opened this issue Dec 12, 2021 · 0 comments · Fixed by jsdom/cssstyle#147
Closed

MutationObserver triggers changes on unchanged inline styles #3305

just-boris opened this issue Dec 12, 2021 · 0 comments · Fixed by jsdom/cssstyle#147

Comments

@just-boris
Copy link

Basic info:

  • Node.js version: 16.13.1
  • jsdom version: 19.0.0

Minimal reproduction case

const { JSDOM } = require("jsdom");
const { window } = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);

async function run() {
  const el = window.document.createElement("div");
  window.document.body.appendChild(el);
  const obs = new window.MutationObserver((mutations) =>
    console.log("m", ...mutations.map((m) => ({ oldValue: m.oldValue })))
  );
  obs.observe(el, { attributes: true });
  el.style.height = "100px";
  await Promise.resolve();
  el.style.height = "100px";
  await Promise.resolve();
}

run();

How does similar code behave in browsers?

https://jsbin.com/goripoqode/edit?html,js,console,output

In browsers, you will see only console message, caused by the first mutation. In JSDOM, there will be mutation callback on every style change, even if it produces the same cssText.

This causes infinite loops, if mutation observer updates styles on the node itself.
just-boris added a commit to just-boris/cssstyle that referenced this issue Dec 12, 2021
@just-boris
fix: skip onchange callback if serialized value did not change
22df81f 
fixes jsdom/jsdom#3305
@just-boris just-boris mentioned this issue Dec 12, 2021
Merged
just-boris added a commit to just-boris/cssstyle that referenced this issue Dec 12, 2021
@just-boris
fix: skip onchange callback if serialized value did not change
d4f2891 
fixes jsdom/jsdom#3305
just-boris added a commit to just-boris/cssstyle that referenced this issue Dec 12, 2021
@just-boris
fix: skip onchange callback if serialized value did not change
cbdc83a 
fixes jsdom/jsdom#3305
@just-boris just-boris mentioned this issue Dec 12, 2021
Merged
domenic pushed a commit to jsdom/cssstyle that referenced this issue Dec 28, 2023
@just-boris
Skip onChange callback if serialized value did not change
1f5940b 
Fixes jsdom/jsdom#3305.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: skip onchange callback if serialized value did not change just-boris/cssstyle
1 participant
@just-boris