-moz-user-select style attribute does not get to the DOM

[kaplas]

For some reason the style attribute -moz-user-select does not get applied to the DOM on Firefox, while the similar -webkit-user-select works just fine on Chrome.

function render()  {
    return h('span', {
        style: {
            '-webkit-user-select': 'none',   // Works on Chrome
            '-moz-user-select': 'none',      // Would work on FF, but does not get applied
            'user-select': 'none'            // Not yet supported
        }
    }, ["foobar"]);
}

Live example: http://codepen.io/kaplas/pen/rVmyXP?editors=001

And before anyone asks, -moz-user-select is a supported attribute on FF, and it can be successfully applied to that element via a normal CSS file or with via the CSS panel in the FF dev tools.

Tested on OS X, Firefox 38.0.5 and Chrome 43.0.2357.81

[Zolmeister]

This is not an issue with virtual-dom, it is an issue with Firefox. Please open an issue with them.

How to test: Open dev tools console. Select iframe context, run:

document.getElementById('text').style['-moz-user-select'] = 'none'
document.getElementById('text').style['-webkit-user-select'] = 'none'

Chrome works, FF doesn't

Edit: consider trying as a workaround

h('span', {
  attributes: {
    style: '-moz-user-select: "none"'
  }
})

[kaplas]

Thanx for getting me on the right tracks here!

It is true that the shorthand for setting style does not work, but this one does:

document.getElementById('text').style.setProperty("-moz-user-select", "none")

The object returned by the .style property is an instance of CSSStyleDeclaration. It should be an object representing the whole inline style of an element. I have no idea at all what the spec says about this, but it seems that with that shorthand access you can only modify standard CSS attributes on FF. On Chrome it works, but I really can not say if it's standard compliant thing or not.

Anyway, on that MDN page .setProperty() is the only mentioned way of how to set a new style property. It is also listed in W3C spec and also supported in Chrome (and I presume that in other browsers as well).

I can not really comment if that shorthand incompatibility is really a FF bug or just an extra feature of WebKit. This just makes me think that if there is that standard-compliant-for-sure API method available, would it really be that bad for virtual-dom just to use that one?

[Zolmeister]

Woah. Learn something new every day.

Relevant code area: https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff-props.js#L28

@Matt-Esch @Raynos Thoughts on this other than adding custom diffing for objects with instanceof CSSStyleDeclaration?