Black box artifact under navbar on Android

michaelkrog · January 5, 2015, 12:48pm

I have a weird artifact on Android only. Right under the navbar it shows a blackbox – not always, just sometimes.

It looks like this on an emulated Android 4.4.2 device, but the artifacts are also on a real device:

The HTML of the shown ion-view taken directly from Inspecting via Chrome is this:

<ion-view hide-back-button="true" class="pane" nav-view="active" style="-webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate3d(0%, 0px, 0px);" title="Edit Calendar">
    <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
    <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
    <ion-content class="scroll-content ionic-scroll  has-header has-footer" style="
"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
        <div> 
            <ion-list class="disable-user-behavior"><div class="list">
                <!-- ngRepeat: event in events | orderBy:'startTime' -->
            </div></ion-list>
        </div>
        
        
    </div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 0px;"></div></div></ion-content>
    <ion-footer-bar class="bar-stable bar bar-footer">
        <div class="buttons" ng-click="prev()">
            <button class="button button-icon ion-ios7-arrow-left"></button>
        </div>
        <h1 class="title ng-binding">05/01/15</h1>
        <div class="buttons" ng-click="next()">
            <button class="button button-icon ion-ios7-arrow-right"></button>
        </div>
    </ion-footer-bar>
</ion-view>

Has anyone stumbled upon this before?

dutilleul · February 19, 2015, 2:12pm

Any update ? solution ?

michaelkrog · February 19, 2015, 2:24pm

Nope.

Unfortunately not.

ionicLL · February 19, 2015, 11:19pm

I experience the same on Android 4.4.4, rebuilt the project from latest Ionic base and removed custom CSS also. I inspected the DOM, however have yet to determine the visual bug.

dpfavand · February 21, 2015, 9:55pm

I’m having a similar issue - a dark line appears across the screen underneath the navbar, although mine starts on the left and seems to only be 1px tall.

(I would upload a screenshot but the forum software is telling me there’s an upload error.)

This is my setup:
Ionic beta 14 using SCSS.
Using the default sidemenu app setup with three pages.
Android 4.4.4 and 4.4.2

The line appears on a screen AFTER visiting a screen with a button in ion-nav-button set to the right side. Example: Screens A & B have no ion-nav-buttons. Screen C has an ion-nav-button (right) with one button.

Start on A - no line
Switch to B - no line on B
Switch to C - no line on C
Switch to B - line on B
Switch to A - no line on A
Switch to C - no line on C
Switch to A - line on A
Switch to B - no line on B

I have no idea what’s causing this. Inspecting it on the device via Chrome on a computer yields shows no issues with anything in the DOM. If I rotate the device while the line is visible, it disappears, and does not reappear when I put it back to the original orientation.

Does this line up with the details of what other people are experiencing?

dpfavand · February 21, 2015, 10:06pm

I think I’ve solved this, for my issue at least.

Recall that the side-menu template has an ion-nav-bar element within the ion-side-menu-content element. I’ve added an empty <ion-nav-buttons side="right"></ion-nav-buttons> as a placeholder. Thus there is always an ion-nav-buttons element on each screen. I no longer have the bar on screens that I’ve navigated to from a screen with a button on the right.

ionicLL · February 23, 2015, 12:22am

I added the empty elements within ‘ion-nav-bar’ tag to resolve my issue, above.

michaelkrog · February 23, 2015, 8:44am

Cool.

I am back on the project on which I had the issue next week. Will try it out then and publish my results.

Thanks!

antoniomiotto · March 4, 2015, 1:01pm

I’m having a similiar issue - the dark box appears only when you run the app, you can’t view that on the chrome browser.

Does any one know how i could fix this ??

i have tried everything from above…