Cordova - 1px white line when rotating to landscape view

[jaypanares]

Hi, I'm currently working on a Cordova app using famous-angular and I noticed that whenever I rotate my device to landscape view, a 1px white line appears at the very top of my app. Below is my HTML:

<fa-app id="app" ng-controller="AppController"> <fa-header-footer-layout> <!-- HEADER VIEW --> <fa-view> <fa-modifier fa-size="[undefined,48]"> <fa-surface fa-background-color="'#009688'"> <header> <i class="fa fa-plus-circle"></i> <h2>Header Title</h2> </header> </fa-surface> </fa-modifier> </fa-view> <!-- CONTENT VIEW --> <fa-view> <fa-surface fa-background-color="'#f5f5f5'"></fa-surface> </fa-view> </fa-header-footer-layout> </fa-app>

I tried running a vanilla implementation of famous (the timbre menu example) and I don't seem to see the issue. Is this a famous-angular specific bug?

Thanks!

[jaypanares]

I seem to have found out the cause. My padding for elements inside the header surface was going beyond the header size and keeping padding within the header surface size prevented the white line from appearing. I had a top and bottom padding of 100% for the h2 and i element and I assumed it would stretch to the surface size and not beyond it. Closing this issue, unless my assumptions about padding: 100% are wrong. If so, please shed a light on how percentage values in CSS works. Thanks!