JDK-8256138 : JavaFX WebView does not handle css transform:translate3d
  • Type: Bug
  • Component: javafx
  • Sub-Component: web
  • Affected Version: 8u271,openjfx15,openjfx16
  • Priority: P3
  • Status: Closed
  • Resolution: Duplicate
  • OS: generic
  • CPU: x86_64
  • Submitted: 2020-11-08
  • Updated: 2021-02-01
  • Resolved: 2021-02-01
Related Reports
Duplicate :  
Description
ADDITIONAL SYSTEM INFORMATION :
Windows 10 1903 + OpenJDK 15.0.1 + OpenJFX 15.0.1
Windows 10 1903 + OpenJDK 15.0.1 + OpenJFX 16-ea+4
Linux Ubuntu 20.04 + OpenJDK 15.0.1 + OpenJFX 15.0.1

A DESCRIPTION OF THE PROBLEM :
My application uses HTML/CSS to build a menu that is hidden at first and "slides in" from the left side when the menu button is clicked.  I've included a short sample HTML file (with all HTML, CSS and JavaScript together) that demonstrates the problem.  In a browser (FireFox), this HTML works fine.  But when the HTML is rendered in a WebView container, the menu doesn't slide in.  I've reproduced the problem with OpenJFX 15.0.1 and OpenJFX 16-ea+4 on Windows 10 using the OpenJDK 15.0.1 version of Java.  I've also reproduced the problem on Linux Ubuntu 20.04 using OpenJFX 15.0.1 and OpenJDK 15.0.1.  When I revert to using either OpenJFX 11.0.2 LTS or OpenJFX 12.0.1, the problem does not occur.

REGRESSION : Last worked in version 12

STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
1. Load the main.html file into a browser (e.g. Firefox)
2. Click the "Click here to open/close Menu" link
3. The menu appears by sliding-in from the left side of the application window
4. Start the App class using OpenJDK 15.0.1 and OpenJFX 15.0.1 or OpenJFX 16-ea+4, making sure the main.html file is accessible to the App
5. Click the "Click here to open/close Menu" link in the application window
6. The menu never appears (does not slide-in from the left side)

EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
A blue-colored menu with the title "Menu" and a list of three items should slide-in from the left side of the app windows.  If you start the same App.class with OpenJDK 15.0.1 and OpenJFX 11.0.2 LTS or OpenJFX 12.0.1, the menu slides-in as expected.
ACTUAL -
The menu does not appear at all (does not slide-in from the left).  In some cases, the menu may appear some time later (5-15 seconds) after some other event occurs (like mousing-over the "Click here ..." link again); but when it appears and under what circumstances is not consistent.  Most times, the menu simply does not appear at all.

---------- BEGIN SOURCE ----------
main.html
-----------------
<!DOCTYPE html>
<html lang="en">

<style>
html, body {
   overflow: hidden;
}

body {
   font-size: 1.1em;
   margin: 10px;
}

.menu-button {
   cursor: pointer;
}

.left-slidein {
   transform: translate3d(-250px, 0, 0);
   position: absolute;
   width: 150px;
   background: #aa99ff;
   color: white;
   left: 0;
   top: 50px;
   height: 100%;
   transition: all .5s;
}

.left-slidein.active {
   transform: translate3d(0, 0, 0);
}

.left-slidein h2 {
   padding: 10px;
   text-shadow: 1px 1px 1px #000;
   border-bottom: 2px solid white;
   margin:5px 0px 0px 0px;
}

.main-menu a {
   display: block;
   text-decoration: none;
   color: #fff;
   font-size: 1.1em;
   padding: 15px;
   border-bottom: 1px solid white;
}

.main-menu a:hover {
   background: #808080;
}

</style>

<script>
function slideinLeftMenu() {
   document.getElementById('left-slidein').classList.toggle('active');
   slideoutRightMenu();
}

function slideoutLeftMenu() {
   document.getElementById('left-slidein').classList.remove('active');
}
</script>

   <head>
      <meta charset="utf-8"/>
      <title>OpenJFX Bug Demo</title>
   </head>
   <body>
      <!-- div><a href="#" onclick="slideinLeftMenu()">Open/Close Menu</a></div -->
      <div id="menu-button" class="menu-button" onclick="slideinLeftMenu()">Click here to open/close Menu</div>
      <div id="left-slidein" class="left-slidein">
         <h2>Menu</h2>
         <div class="main-menu">
            <nav>
               <a id="item1" href="#" onclick="slideoutLeftMenu();">Item 1</a>
               <a id="item2" href="#" onclick="slideoutLeftMenu();">Item 2</a>
               <a id="item3" href="#" onclick="slideoutLeftMenu();">Item 3</a>
            </nav>
         </div>
      </div>
   </body>

</html>
-----------------
App.java
-----------------
package bug.openjfx;

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URL;

import org.w3c.dom.Document;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class App  extends Application {

   private Stage primaryStage;
   private WebView webView;
   private WebEngine webEngine;
   protected Document document; 
   
   public static void main(String[] args) {
      launch(args);
      System.exit(0);
   }

   @Override
   public void start(Stage stage) throws Exception {
      this.primaryStage = stage;
      Platform.setImplicitExit(true);
      primaryStage.setTitle("OpenJFX Bug Demo");
      webView = new WebView();
      webEngine = webView.getEngine();
      StackPane appLayout = new StackPane();
      appLayout.getChildren().add(webView);
      Scene scene = new Scene(appLayout);
      primaryStage.setScene(scene);
      primaryStage.setWidth(400);
      primaryStage.setHeight(400);
      webEngine.getLoadWorker().stateProperty().addListener( new ChangeListener<State>() {
         public void changed(@SuppressWarnings("rawtypes") ObservableValue ov, State oldState, State newState) {
            if (newState == State.SUCCEEDED) {
               document = webEngine.getDocument();
            }
         }
      });
      String document = readDocumentAsString("main.html");
      webEngine.loadContent(document);
      primaryStage.show();
   }

   private String readDocumentAsString(String documentName) {
      URL url = this.getClass().getResource(documentName);
      String document = readFileContentsAsString(url.toString().substring(6));
      return document;
   }
   
   private String readFileContentsAsString(String filename) {
      InputStream inStream = getFileResourceInputStream(filename);
      StringBuffer fileString = new StringBuffer();
      try {
         BufferedReader br = new BufferedReader(new InputStreamReader(inStream));
         String lineRead = br.readLine();
         while (null != lineRead) {
            fileString.append(lineRead).append("\n");
            lineRead = br.readLine();
         }
         br.close();
      } catch (Exception e) {
         fileString = new StringBuffer();
      }
      return fileString.toString();
   }

   private InputStream getFileResourceInputStream(String filename) {
      InputStream inStream = null;
      try {
         inStream = new FileInputStream(filename);
      } catch (FileNotFoundException ignore) {
      }
      return inStream;
   }
}
-----------------
---------- END SOURCE ----------

CUSTOMER SUBMITTED WORKAROUND :
The only work-around I have found is to revert to an older release of OpenJFX.  I was previously using OpenJFX 12.0.1 on Windows 10 and the problem does not occur there.  I also tried OpenJFX 11.0.2 LTS on both Windows 10 and Ubuntu 20.04 and the problem does not occur with this version on either OS.

FREQUENCY : always



Comments
I can confirm that this fails with openjfx 15.0.1 and passes with openjfx 15. The only changes that went into 15.0.1 were those related to the above mentioned WebKit update.
10-11-2020

This is possibly a regression introduced by the most recent WebKit update, JDK-8245284.
10-11-2020

Checked with attached Test Case, in Windows 10, Issue is reproducible. Test Result: ======== 8u271: Fail 8u261: Pass openjfx_16ea4: Fail openjfx_15.0.1:Fail openjfx_11.0.2:Pass openjfx_11.0.8:Pass openjfx_11.0.9:Fail
10-11-2020