Issue metadata
Sign in to add a comment
|
Changing CSS backgroundPosition within a custom element (WebComponent) stopped working correctily
Reported by
micbu...@gmail.com,
Apr 23 2018
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36 Steps to reproduce the problem: 1. Go to : https://g200kg.github.io/webaudio-controls/2.0/sample1.html 2. Be sure the zoom is 100%, click and drag some knobs (they are custom elements v1 with CSS inside) 3. Zoom in or out: when you turn knobs, display is incorrect What is the expected behavior? The knobs (subimage of a big image/sprite) should turn in place. They do turn in place with other browsers or with Chrome 65. What went wrong? I don't know. I've tried this: http://jsbin.com/keqafoc/edit?html,js,console,output with the same sprite image used by knobs and it works correctly with chrome 66. I guess that something went bas with Chrome 66 when such a code is within a custom element. Did this work before? Yes Chrome 65 Does this work in other browsers? Yes Chrome version: 66.0.3359.117 Channel: stable OS Version: OS X 10.12.6 Flash Version:
,
Apr 23 2018
It specifically breaks at the zoom level of 110%.
,
Apr 23 2018
,
Apr 23 2018
Developers are suspicious about the malfunction of "background-size" css property.
,
Apr 23 2018
,
Apr 23 2018
,
Apr 23 2018
Removing / resetting this property fixed temporaly the bad behavior...
,
Apr 23 2018
If you try with https://mainline.i3s.unice.fr/AmpSim4/ where the knob sizes is 69 not 64 like in the previous example, you will see that removing background-size makes things worse. The value is computed in JS in the webaudiocontrols lib depending on the size of the sprite image, number of sprites and the sprite size. I used a console.log to print the values, they are correct and the behavior is ok on other browsers… Not on chrome 66. But the problem is related to these CSS properties, for sure.
,
Apr 23 2018
You're using a very tall skinny sprite map with % position calculations, which blows up any numerical error in computing positions. I'm working on a fix now, but avoiding regressing other cases is proving hard.
,
Apr 24 2018
I have pushed a workaround which uses 'px' instead of '%' for URL of reproduce step. Please use https://g200kg.github.io/webaudio-controls/test20180305/sample1.html for checking if necessary. |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by hongchan@chromium.org
, Apr 23 201850.0 KB
50.0 KB View Download