Background color is lost depending of HtmlView text length

[tsonevn]

From @public-virtualys on October 18, 2017 9:10

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.1
• Cross-platform modules: 3.2.0
• Runtime(s): 3.2.0 both
• Plugin(s): none

Please tell us how to recreate the issue in as much detail as possible.

Get a very basic reusable component, that displays a header and a body with enabled scrolling :

import { Component } from '@angular/core';
@Component({
    selector: 'test-bug-view',
    template: `
            <ScrollView>
                <StackLayout>
                    <StackLayout>
                        <ng-content select="[head]"></ng-content>
                    </StackLayout>
                    <StackLayout>
                        <ng-content select="[body]"></ng-content>
                    </StackLayout>
                </StackLayout>
            </ScrollView>`
})
export class TestBugComponent
{
}

Then use it in a page, displaying some html paragraphs :

import { Component, OnInit } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "my-component",
    template: 
        `<test-bug-view>
            <StackLayout head backgroundColor="red">
                <Label class="h2" text="Header" horizontalAlignement="center" verticalAlignement="center"></Label>
            </StackLayout>
            <StackLayout body backgroundColor="yellow">
                <HtmlView class="body" [html]="text" backgroundColor="green"></HtmlView>
            </StackLayout>
        </test-bug-view>`
})
export class SettingsComponent implements OnInit
{
    private _text: string;

    public get text(): string {
        return this._text;
    }

    public ngOnInit(): void {
        const line: string = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non pretium erat. Sed efficitur ultricies ultrices. Vestibulum euismod et orci sed elementum. Mauris lorem nisi, viverra eu enim ac, porta interdum neque. Maecenas porta purus quis lectus porta vestibulum. Sed et ipsum metus. Cras ex ex, aliquet ut felis quis, commodo rutrum erat. Maecenas luctus nibh sit amet sem maximus aliquam. Curabitur a lacinia libero. Aliquam euismod nec nulla quis volutpat. In vel ultrices orci, eget imperdiet enim. In egestas vehicula tincidunt. Vestibulum et magna semper, dapibus magna non, sagittis elit. Etiam dictum, magna in rutrum tristique, ante elit porttitor massa, vel iaculis erat magna sit amet leo. Phasellus neque lorem, bibendum quis eleifend vel, posuere ut enim.</p>`;
        let text: string = "";
        for (let i = 0; i < 8; ++i) {
            text += line;
        }
        this._text = text;
    }
}

It works as expected, with header having a red background color, and HTML text a green one.

Now, increase HtmlView bounds in adding some extra paragraphs : change the for loop bound to 30 instead of 8. Then the problem occurs : the HtmlView successfully displays all the 30 paragraphs of text, but there is no more background color under it - neither green nor even yellow.

Simulated on an emulated device using AVD, and reproduced on an Sony Xperia Z3 Tablet Compact / Android 6.0.1.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Given on the previous paragraph.

Copied from original issue: NativeScript/NativeScript#4961

[tsonevn]

Hi @public-virtualys, Thank you for reporting this issue. I tested this case in the sample project and was able to recreate the problem. The issue is reproducible only on Android. I am attaching sample project, which could be used for debugging. Please keep track on the issue for further info. Archive.zip

Edit: In our further research, we found that the issue is related to the ScrollView component. Using it for a container will prevent the HtmlView from calculating the correct height, where the backgroundColor should be applied. As a temporary solution, you could set up for Android the backgroundColor to the ScrollView. for example:

<ScrollView backgroundColor="green">
                <StackLayout>
                  ..............
                </StackLayout>
            </ScrollView>`

[public-virtualys]

Unfortunately, i can't use the ScrollView itself as i am implementing a parallax effect on scroll ; the HtmlView has to overlap an image during scroll, and then i need a solid background color. Any other thoughts ?

[NickIliev]

Using WebView instead of HtmlView is also a possible workaround.

[burner03]

Ah man, i'm having this issue with WebView and wanted to know if you guys ever found a solution.

Basically my container (A StackLayout within a ScrollView) contains a WebView and when it increases over 2000 height the background color from the StackLayout disappears (white).

I've tried manually setting the height to be certain numbers etc but it seems like 2k is the value in which the stacklayout blows up. Everything renders fine but the background color. The box shadow (androidElevation="12") and everything else is still present and looks fine.