[Bug] JavaScript rendering: toolbar disappears on scroll and dialog blanks the underlying form

[jsfan3]

Summary

When I scroll this minimal cloud-built JavaScript app in Firefox on macOS, the Hi World toolbar and hamburger icon disappear. I also see intermittent rendering anomalies, including missing text and the toolbar title appearing without its toolbar background. These additional artifacts do not appear identically on every attempt. Pressing the generated Hello World button also displays its dialog over a completely white background instead of the underlying form. I also see text truncated above a large blank region in Firefox on Linux. I have attached four screenshots.

Minimal reproducer

Test URL: https://routinote.hopto.me/scrolling-test/.

I generated a new project using the web Initializr at https://start.codenameone.com/, retained its generated Hello World screen, and added only one SpanLabel containing long placeholder text. I then submitted it to the Codename One cloud build server for JavaScript compilation. This is not an offline/local JavaScript build. The downloaded MyAppName-js.zip was published unchanged: all 36 hosted files match the archive byte-for-byte.

The application is MyAppName (codename1.displayName=MyAppName). Its complete entry class is below; only the long string's source formatting has been wrapped for readability. No scrolling, toolbar, viewport or selection override is added.

MyAppName.java

package com.example.myapp;

import static com.codename1.ui.CN.*;

import com.codename1.components.SpanLabel;
import com.codename1.system.Lifecycle;
import com.codename1.ui.*;
import com.codename1.ui.layouts.*;
import com.codename1.io.*;
import com.codename1.ui.plaf.*;
import com.codename1.ui.util.Resources;

/**
 * This file was generated by <a href="https://www.codenameone.com/">Codename One</a> for the purpose
 * of building native mobile applications using Java.
 */
public class MyAppName extends Lifecycle {
    @Override
    public void runApp() {
        Form hi = new Form("Hi World", BoxLayout.y());
        Button helloButton = new Button("Hello World");
        hi.add(helloButton);
        helloButton.addActionListener(e -> hello());
        hi.getToolbar().addMaterialCommandToSideMenu("Hello Command",
                FontImage.MATERIAL_CHECK, 4, e -> hello());
        hi.add(new SpanLabel(
                "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. "
                + "Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus "
                + "mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa "
                + "quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, "
                + "rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. "
                + "Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend "
                + "tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem "
                + "ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius "
                + "laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur "
                + "ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget "
                + "condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam "
                + "nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt "
                + "tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci "
                + "eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales "
                + "sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Lorem ipsum "
                + "dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. "
                + "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec "
                + "quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. "
                + "Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, "
                + "imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer "
                + "tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. "
                + "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, "
                + "dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. "
                + "Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper "
                + "ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, "
                + "sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, "
                + "luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae "
                + "sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus "
                + "tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed "
                + "consequat, leo eget bibendum sodales, augue velit cursus nunc,"));
        hi.show();
    }

    private void hello() {
        Dialog.show("Hello Codename One", "Welcome to Codename One", "OK", null);
    }

}

Steps to reproduce

A. Scrolling

1. Open https://routinote.hopto.me/scrolling-test/ in Firefox on macOS and keep the tab visible in the foreground.
2. Wait for the generated Hi World screen, Hello World button and long SpanLabel text to appear.
3. Scroll vertically through the content. If necessary, use a window height that leaves part of the long text below the visible area.
4. Observe the toolbar/title/hamburger and the text while scrolling. The exact additional graphical corruption varies between attempts; not every variant occurs on every scroll.

B. Opening the generated dialog

1. Open the same test page and wait for the form to appear.
2. Press the generated Hello World button.
3. The Hello Codename One dialog appears, but the surrounding form becomes completely white.

Expected and observed behavior

Expected: scrolling the form content leaves the generated toolbar/title/menu intact and paints the visible text consistently. Text should not disappear or leave arbitrary blank areas, and the title should not detach from its toolbar. Opening the standard dialog should preserve the underlying form as its backdrop, with the normal theme's modal presentation.

Observed: the toolbar disappears during scrolling. Additional intermittent states include part of the text disappearing or the title appearing without the toolbar background. In the supplied screenshot, the toolbar/hamburger are absent, Hello World is partly clipped near the top, and the text is cut off above a blank lower region. This image shows one state, not every reported variant. The second image shows the generated dialog surrounded by an entirely white area; the underlying toolbar, button and text are no longer visible. My Linux screenshot shows the long text cut across a line near the top of a large blank lower area.

The entry class uses the generated Form/BoxLayout.y() and a single added SpanLabel; it does not configure toolbar hiding or customize scroll behavior.

Codename One version

7.0.273 for both cn1.version and cn1.plugin.version in the Initializr project's POM. The cloud artifact contains the ParparVM JavaScript runtime; its cn1-version-numbers file contains 7dd4e7d08b3442d90959477ee52a5ae8c4361b29.

JDK version

JDK 17: both generated JAR manifests contain Build-Jdk-Spec: 17. The project uses the installed Microsoft OpenJDK 17.0.19 (ms-17 in IntelliJ), and its CN1 Java build hint is 17. The JavaScript compilation itself ran on the Codename One cloud build server.

Target environment

• Target: JavaScript output compiled by the Codename One cloud build server.
• Browser: Firefox 156.0.1 on macOS.
• OS/build submission host: macOS 15.8 (24H23).
• I also tested with Firefox 156.0 on Linux.

Last known working version

Unknown.

Logs and diagnostics

The screenshots below show the graphical failures. The public test serves the unchanged cloud archive.

Screenshots or recordings

Firefox on macOS: After scrolling, the toolbar and hamburger icon disappear, and the SpanLabel text is cut off. The "Hello World" button is clipped and cannot be clicked.

Firefox on macOS: Pressing "Hello World" opens the dialog, but the underlying form turns completely white: the toolbar, button and SpanLabel disappear.

Firefox on Linux: During scrolling, the SpanLabel text is abruptly cut off across a line, leaving a large blank area below.

Linux: The "Hi World" title appears outside the toolbar and overlaps the SpanLabel text.

Report checks

• I searched existing issues and discussions for this behavior.
• The reproducer contains no credentials, signing keys, or private customer data.
• I understand that triage is not a commitment to a fix date.