iOS: Page able to be dragged horizontally

[ajoslin]

Best reproduce case I've found so far is at http://ionicframework.com/demos/collection-repeat.

Drag the header left or right.

Mentioned in #1157

[robdmoore]

Any update on this one guys?

[jough]

I'm seeing this since beta 4 in our app, too - you can drag the entire app to the left by grabbing the header or tab bar (but not the content area).

[ajoslin]

Sorry about this, we've had our heads down this past week still creating proper testing infrastructure. It's very close to done.

What is it? Well, long story short, protractor will go through demos.ionicframework.com, interact with the app, take screenshots of stage of its interaction, and compare those screenshots with the previous tests' screenshots.

Tools like Huxley inspired this, but Huxley isn't maintained and doesn't work with remote browser testing on Saucelabs. Protractor does. Most of the work is building out the demos and building out our screenshot comparing server. More info on this soon, we'll be blogging about it for sure.

I'll get to this bug soon, once we finish this testing infrastructure.

[mhartington]

@ajoslin some more issues with this in beta 6.

http://forum.ionicframework.com/t/1px-gap-on-right-header/5002/3

[ghost]

Hi,

Problem is with styles for header buttons on right side and more precisely with margin-right for pseudo element :after which is responsible for larger hit area.

After change it on -6px everything is ok.

[jough]

Figured out the cause of the problem for us, but don't have a solution yet.

We have an ion-nav-bar with ion-views that don't use a title (we have a global search form) and when the title is missing or empty, the ion-nav-bar empty title gets a left and right sizing of 634px on iOS, which makes a horizontal scrollbar. Removing the empty h1 fixes the problem.

As this is created in a directive we'd rather not have to edit the Ionic bundle code directly. Not sure where the sizing issue is happening yet, but if I can figure it out I'll submit a PR.

[udfalkso]

Changing :after style to -6px right also fixes the problem for me. Thanks.

[ajoslin]

Thanks for the details all, I'm fixing this now.

[ajoslin]

OK, so it doesn't look like there's a margin-right: -6px rule for the buttons' :after rule, do you mean the right: -6px rule?

[udfalkso]

I've since update to newer versions of ionic and this bug wasn't a problem. So, perhaps it's already fixed?

[jough]

Still have the problem with the latest nightly.

[ajoslin]

@jough I actually cannot reproduce the exact error you described: on iOS, the title text being improperly adjusted with left and right styles when there is no title text.

In fact, when there is no text, I am unable to get the title to have any styles applied to it at all.

[ajoslin]

@jough can you post code that reproduces this?

[perrygovier]

@jough, since it's been a month, I'm going to assume the latest beta has fixed the issue. Let me know if that's not the case.

[lunaroja]

I can still reproduce this issue with Beta 14 on iOS. An overflow shift would automatically happen when a select was triggered on device/simulator. You could see a white 1px line on the right side.

It's specifically .bar .title + .buttons { right: 5px; } that is causing the issue. Changing to right: 6px;` does solve the issue.

The best/simplest fix I could find was just adding .bar { overflow: hidden; } to my project. I have not seen any negative impact because of that added rule, so it might be worth adding it to _bar.scss.

[mhartington]

Can you provide a simple codepen that can replicate this?