Problem description
While scrolling a ScrollView in the browser, a 2D matrix is applied to some elements. Also, these elements are not directly created in the code.
Steps to reproduce
Use the following code:
Titanium.UI.setBackgroundColor("#efefef");
var loginWindow = Titanium.UI.createWindow({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var loginContainer = Ti.UI.createScrollView({
top : 0,
left : 0,
width : 300,
height: 400
})
var userNameTextField = Titanium.UI.createTextField({
backgroundColor : "white",
width: 320,
top: 100
});
loginContainer.add(userNameTextField);
loginWindow.add(loginContainer);
loginWindow.open();
Run the app on the browser (e.g. Chrome); looking at the source during the scrolling (the view scrolls a bit left/right), you might see these elements:
<div class="TiUIElement TiUIScrollView TiLayoutsComposite"
data-widget-id="Ti.UI.ScrollView:0"
style="left: 0px; top: 0px; width: 300px; height: 400px;">
<div class="TiUIElement TiUIView TiLayoutsComposite"
data-widget-id="Ti.UI.View:2"
style="background-color: rgb(85, 85, 85);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
opacity: -7319573220020853000;
z-index: 2147483647;
left: 0px; top: 394px;
width: 281px; height: 6px;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate(0deg);">
</div>
As you might notice, the first element is the Ti.UI.ScrollView, while the second is not something that has been added in the source (gray background color, border radius, ???).
The properties of this element are changing while scrolling: the opacity gets a crazy value (-7319573220020853000), and a matrix is applied to it.
Tested with 2.1.2 and 2.1.3: the element with border: 3px is still there, but opacity is set to 0.5 (and does not change), while the matrix is never applied - although the "left" property changes.
Those unknown elements are a vital part of Mobile Web. Almost every control contains at least one, and sometimes as many as six, internal controls that were not added by the user's code. Check out button some time for a more complex example of these inner controls. All elements that can scroll have an inner control that we apply a 2D Matrix to to make them scroll.
Why this is not happening on v2.1.3? Also, the opacity gets set to -7319573220020853000 (again, only in v3.0.0)
We have a new animation engine for 3.0, that's why things look different. Those "unknown" controls are under the hood controls not meant to be accessed by devs, so expect to see their behavior change over time as we optimize the UI system in Mobile Web. As for the opacity thing, can you open a new ticket for it? That problem is unrelated to the title of this ticket.