aurelia / aurelia/binding

Inconsistent behavior between style.bind="{}" and style.bind="{ property: undefined }" in newer Chrome

Open
#715 21 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
110
Forks
98
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
2.1.4

**Please tell us about your environment:**
* **Operating System:**
Linux (Ubuntu Bionic)

* **Node Version:**
Electron 3.0

* **NPM Version:**
6.4.1

* **JSPM OR Webpack AND Version**
JSPM 0.17.0-beta.48

* **Browser:**
Electron 3.0 (Chrome 66)

* **Language:**
Typescript 3.0

**Current behavior:**
Using style.bind="{ property: undefined }"
*does not* unset property if the previous binding had a value for that property.

Using style.bind="{ }"
*does* unset the property if the previous binding had a value for that property.

**Expected/desired behavior:**
It should unset the property the same as if binding to an object without the property key.

In Electron 2.0, this was the behavior. I assume there was a change to style.setProperty() in Chromium
where an undefined value no longer removes the style.

Can we call style.removeProperty (or replace undefined with null or "" when calling setProperty) instead to restore the previous behavior?

https://gist.run/?id=4044775d2efdb1733b55a0b9d92de378&sha=3acf777a662b49c4266c6449c2bf2d8413b250e6

* **What is the motivation / use case for changing the behavior?**
This is how it used to work in a previous browser version.
More importantly, as shown in the demo, the same object bound to style (initially, and on the second button click) results in two different styles applied based on the value bound on the first button click.

Contributor guide

Open the contributing guide

Research direction

Start by running the linked gist.run reproduction in the reported Electron 3.0/Chrome 66 environment and compare style.bind="{}" with style.bind="{ property: undefined }". Trace the style binding path around the mentioned style.setProperty behavior, then verify that an undefined property removes the previous inline style and that the relevant regression is covered by a test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.