[TIMOB-24269] iOS: Change visible property sometimes change the center position of the view

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Cannot Reproduce
Resolution Date	2019-12-06T18:13:28.000+0000
Affected Version/s	Release 6.0.1, Release 5.5.1
Fix Version/s	n/a
Components	iOS
Labels	alloy, center, opacity, position, visible
Reporter	Ricardo Pereira
Assignee	Unknown
Created	2017-01-03T11:10:33.000+0000
Updated	2019-12-06T18:13:28.000+0000

Description

I've 3 (loader, locker and debug view) hidden views (touchEnabled and visible set to false, and zIndex to 1) above the main view (zIndex = 2). Each 'over' view has this method:

$.debugView.show = function() {

    $.debugView.touchEnabled = $.debugView.visible = true;

    $.debugView.zIndex = 3;
};

$.debugView.hide = function() {

    $.debugView.touchEnabled = $.debugView.visible = false;

    $.debugView.zIndex = 1;
};

This screen has the 3 'over' views hidden: !https://i.stack.imgur.com/tIChk.png! Now, I'm opening the 'debug view', but, *SOMETIMES* it seems like it changes the positions (as if the center it's on the top left corner instead of the center of the device). !https://i.stack.imgur.com/uetQz.png! Instead of the required result: !https://i.stack.imgur.com/JkvK4.png! If I use the opacity instead of the visible property, it works properly. This might be an SDK bug right?

<Alloy>
    <Window>
        <View id="content"/>
        <View id="locker"/>
        <View id="loader"/>
        <View id="debugView"/>
    </Window>
</Alloy>

All of these 4 views don't have width or height (so it uses the Ti.UI.FILL as default) *Rene Pot stackoverflow answer:* _I have noticed this too with a completely different implementation. I had just one view that I included in a window. Apparently the left and top calculations were not done properly if the elements is hidden. What I did to solve the issue is to hardcode the left/top position by calculating the left position using this: *$.content.left = (Ti.Platform.displayCaps.platformWidth - 75) / 2;* Where in my case 75 is the width the element has, so that'll be bigger in your case. You can do the same for height. Now, this is an iOS only solution. On Android you will need to take DPI into consideration calculating it. I do think it is a bug, though this solution works perfectly for me. I recommend looking at JIRA and see if it is a known issue, and if not, raise it with a very specific explanation of the problem, preferably with a reproducible case delivered as an app. Classic would help most. And if it is not reproducible in classic it might be an alloy issue._

Comments

Hans Knöchel 2017-01-03

Can you please provide a full test-case for this? A single app.js file focussing on the issue helps a lot to get started in this cases. Also, can you ensure it happens on both iOS and Android?
Rene Pot 2017-01-03

I am not sure I've seen this happen on Android. On iOS I am certain.
Ricardo Pereira 2017-01-03

I'll try to attach a simple project today (in alloy). Note that you'll need to show and hide the view many times in order to reproduce that
Hans Knöchel 2017-01-03

Try a single app.js. Alloy makes it more difficult to isolate in a debugging scenario.

Ricardo Pereira 2017-01-03

   var win = Ti.UI.createWindow({
       title: "TIMOB-24269: Position Test",
       backgroundColor: "#fff"
   });
   
   win.add(Ti.UI.createLabel({
       text: "Try Me"
   }));
   
   var popup = Ti.UI.createView({
       backgroundColor: "#BF333333",
       show: function() {
           popup.visible = true;
       },
       hide: function() {
           popup.visible = false;
       }
   });
   
   win.add(popup);
   
   win.addEventListener("click", function() {    
       if (popup.visible) {
           popup.hide();
       } else {
           popup.show();
       }
   });
   
   win.open();

Hans Knöchel 2017-01-03

You cannot use show and hide as properties. It's possible because of the internal proxy architecture, but it will cause bad issues. Besides that, I could not reproduce the issue with 6.0.1.GA and main-thread enabled. Other than that, you should not rely on the visible property directly after showing / hiding a view, since the view hierarchy does not synchronously update it's properties. This would cause UI-glitches and (primary) freezes.
Ricardo Pereira 2017-01-03

I was a basic example, in my case the show and hide methods have another name (showView, hideView, enable), but I'm using $.myView.enable(false/true); Inside each view I've an JS object called 'data', all of my properties are inside that object, in my case, I'm using data.status to store the status of the view (if its opened or not)
Rene Pot 2017-01-04

For me it only happens when the view is initially hidden and has no left/right properties but centers automatically.
Ricardo Pereira 2017-01-09

I've made a sample video: [youtube sample video](https://youtu.be/eRdi1CFk_ZE)
Alan Hutton 2019-12-06

Closing issue as “Cannot Reproduce. We have tested the code provided, and found that it is out of date with our current release (8.3.0.GA as of the date of closure), and out of date with mobile OS versions. Updating/Creating code may not reproduce the issue reported, or be a valid test case. If community members feel that the issue is still valid, please add a comment, and include code that demonstrates/reproduces the issue.

JSON Source