zoom + / - breaks webaudiocontrols with chrome 66

[micbuffa]

Hi, all sprites got translated when I use the zoom on webpages with webaudiocontrols... with chrome 66. I don't know if this is a browser bug or a problem with css/webcomponents...

[micbuffa]

Just found this: "Note: As of Chrome 66 – three-part syntax for background-positions are being deprecated due to parsing ambiguities … see here and [here] (https://drafts.csswg.org/css-values-4/#ref-for-propdef-background-position%E2%91%A0). So If I understand correctly: background-position: right 45px bottom; will have to be changed to background-position: right 45px bottom 0;"

[micbuffa]

It's not that (see my test here: http://jsbin.com/keqafoc/edit?html,js,console,output), it's related to CSS inside the WebComponent...

[g200kg]

I tested it, I think that this is a Chrome CSS bug.
It is serious because it seems to have occurred in Chrome 66 and not fixed in Chrome 68 (Canary). I am currently investigating the best avoidance method. This may be avoided by not using "%" in the background-size property.

[micbuffa]

Ok, this is a bug in Chrome. I filled an issue (cf https://bugs.chromium.org/p/chromium/issues/detail?id=835855&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=)

And I have also a quick fix: just add one line to redraw() { ...} in webaudiocontrols.js to reset the backgroundSize CSS property. Here the new code (only one line to change):

redraw() {

  this.digits=0;
  if(this.step && this.step < 1) {
    for(let n = this.step ; n < 1; n *= 10)
      ++this.digits;
  }
  if(this.value<this.min){
    this.value=this.min;
    return;
  }
  if(this.value>this.max){
    this.value=this.max;
    return;
  }
  let range = this.max - this.min;
  let style = this.elem.style;

  // Michel Buffa temporary fix!
  style.backgroundSize = "";

  let sp = this.src?this.sprites:100;
  if(sp>=1){
    let offset = ((sp * (this.value - this.min) / range) | 0);
    style.backgroundPosition = "0px -" + (offset*this.kh) + "px";
    style.transform = 'rotate(0deg)';
  } else {
    let deg = 270 * ((this.value - this.min) / range - 0.5);
    style.backgroundPosition="0px 0px";
    style.transform = 'rotate(' + deg + 'deg)';
  }
}

[micbuffa]

Above fix is wrong, and works only in some cases. Forget about it... Indeed, it's related to a CSS bug. Il filled an issue in the chromium bug reporting tool.... if you find a temporary fix, good, I have plenty of demos tomorrow and it's a shame that I can't use the zoom....

[micbuffa]

Ok, a fix is on its way in Chronme, see comment 10 of https://bugs.chromium.org/p/chromium/issues/detail?id=835855

But apparently if they revert to the old code, it breaks many other things... so the fix can take some time to arrive in Chrome...

[g200kg]

I have pushed a workaround that use 'px' instead of '%'. This workaround is roughly okay, but still knobs are slightly shifted in some zoom state such as 67%.

[micbuffa]

Argl... Chrome devs really failed with chrome 66, this bug + the autoplay policy that broke nearly all wwebaudio apps.... Thanks a lot for your fix !!! Le mar. 24 avr. 2018 à 18:01, g200kg <[email protected]> a écrit :

…

I have pushed a workaround that use 'px' instead of '%'. This workaround is roughly okay, but still knobs are slightly shifted in some zoom state such as 67%. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAnl2Nhtbk0gLsGZVQcOGFEf6PNvDGDqks5tr0xdgaJpZM4Tf2TK> .