White line and little gray square artifact on Ionic 3

Ionic Framework ionic-v3
1

Short description of the problem:
There is a white line over the ion-content and a gray little square below
image

image

What behavior are you expecting?
No white space, no little square

Steps to reproduce:

add the HTML below (for the first image)

<ion-content padding>
  <ion-grid>
    <ion-row class="row-top">
      <img height="160" width="160" src="assets/imgs/logo.png">
    </ion-row>
    <ion-row>
    </ion-row>
  </ion-grid>
</ion-content>
<ion-footer no-border>
    <ion-icon item-start color="gray-light" name="person"></ion-icon>
</ion-footer>

Which Ionic Version?
Ionic:
ionic (Ionic CLI) : 4.0.3 (C:\Users\jose_\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.10

Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0

System:
Android SDK Tools : 26.1.1
NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

I have tried:

.has-refresher scroll-content {
  border-top: 0px;
}

from https://github.com/ionic-team/ionic/issues/10994 :

$refresher-border-color: transparent;

.has-refresher > .scroll-content {
  margin-top: -1px;
}
2

Is this in the HTML or in the native part?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: Remote Debug your Ionic App · ionic.zone You can inspect the elements as you can on desktop.

Another thing I noticed:

Your Cordova tooling seems to be out of date, which might be causing all kinds of problems.
You can read about how to figure out the current Cordova versions and how to update CLI, platforms and plugins here: How to update Cordova CLI, Platforms and Plugins · ionic.zone

3

Thank you @Sujan12, I updated and the gray square artifact dissapeared! Thanks!

The white line remains there, any idea?

This is my current config:

image

4

For the white line, updating the cordova-plugin-ionic-webview might help - but make sure to read the release notes as this drops support for some older OS versions.

Otherwise, remote debugging and inspecting the HTML would still be what I would try to confirm if it is in the web or the native part of the app.

5

Agree with @Sujan12 cordova-plugin-ionic-webview might help

You could also try to play with attributes like fullscreen="true" on the content to put the grey pixel behind your navbar

but otherwise I would say almost no chance of solving it at least in v3 (in v4 I didn’t pay attention so far if that still happens or not)

there are other idea about it in the following issue opened like two years ago :wink:

6

mmm… sorry, I was wrong, the squares are still there, randomly, in various pages. I will try the solutions you proposed. Thanks @reedrichards @Sujan12

1 Like