ADDITIONAL SYSTEM INFORMATION :
macOS BigSur 11.5.2
openjdk 11.0.13
openjfx 18
A DESCRIPTION OF THE PROBLEM :
WebView's gradient fill may not render correctly.
OpenJFX 18's WebView may not render gradient fills correctly; OpenJFX 17 does not have this problem.
The scope of this problem is considered to be large, and if you are using WebView, it will be a disincentive to upgrade to 18.
The following experimental results suggest that the problem is caused by changes in the Native code, not the Java code.
I was able to avoid this problem by simply replacing it with the libwebkit.dylib file built with the snapshot of 2021-05-05 in my development environment.
Looks like the effect of one of the following three changes, possibly 8268849.
* 2021/8/17 - 8272329: Cherry pick GTK WebKit 2.32.3 changes
* 2021/7/14 - 8268849: Update to 612.1 version of WebKit
* 2021/6/23 - 8268915: WebKit build fails with Xcode 12.5
STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
Launch the attached test application.
EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
The rendering of the attached HTML file matches the web browser.
ACTUAL -
* linear-gradient : OK
* linear-gradient + tile: NG
* linear-gradient + border: NG
* linear-gradient + tile + border: NG
* radial-gradient: OK
* radial-gradient + tile: NG
* radial-gradient + border: NG
* radial-gradient + tile + border: NG
* fill: OK
* fill + tile: OK
* fill + border: OK
* fill + tile + border: OK
---------- BEGIN SOURCE ----------
import java.net.URI;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class WebGradientTest extends Application{
@Override
public void start(Stage primaryStage) throws Exception {
WebView webView = new WebView();
BorderPane root = new BorderPane(webView);
Scene scene = new Scene(root, 900, 800);
URI uri = this.getClass().getResource("/test-gradient.html").toURI();
webView.getEngine().load(uri.toURL().toString());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
-------
<html>
<head>
<style>
h2{font-size:10pt;font-weight:normal}
.lgra{
background-image:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
width: 240px;
height: 30px;
}
.rgra{
background-image: radial-gradient(circle, red 20%, yellow 50%, skyblue 100%);
width: 240px;
height: 30px;
}
.fill{
background-color:red;
width: 240px;
height: 30px;
}
.tile{
background-size: 15px 15px;
}
.border{
border: 1px solid black;
}
</style>
</head>
<body>
<h2>linear-gradient</h2>
<div class="lgra"></div>
<h2>linear-gradient + tile</h2>
<div class="lgra tile"></div>
<h2>linear-gradient + border</h2>
<div class="lgra border"></div>
<h2>linear-gradient + tile + border</h2>
<div class="lgra tile border"></div>
<h2>radial-gradient</h2>
<div class="rgra"></div>
<h2>radial-gradient + tile</h2>
<div class="rgra tile"></div>
<h2>radial-gradient + border</h2>
<div class="rgra border"></div>
<h2>radial-gradient + tile + border</h2>
<div class="rgra tile border"></div>
<h2>fill</h2>
<div class="fill"></div>
<h2>fill + tile</h2>
<div class="fill tile"></div>
<h2>fill + border</h2>
<div class="fill border"></div>
<h2>fill + tile + border</h2>
<div class="fill tile border"></div>
</body>
</html>
---------- END SOURCE ----------
FREQUENCY : always