Problem description
While scrolling a ScrollView in the browser, the opacity value of some html elements in the page is set to wrong values (e.g. high negative numbers).
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>
The properties of this element are changing while scrolling: the opacity gets a wrong value of -7319573220020853000.
Master pull request: https://github.com/appcelerator/titanium_mobile/pull/3446 3.0.x pull request: https://github.com/appcelerator/titanium_mobile/pull/3447
Closing ticket as fixed.