JDK-8234471 : Canvas in webview displayed with wrong scale on Windows
- Type: Bug
- Component: javafx
- Sub-Component: web
- Affected Version: openjfx11,openjfx13,openjfx14
- Priority: P3
- Status: Resolved
- Resolution: Fixed
- OS: windows_10
- CPU: x86_64
- Submitted: 2019-11-18
- Updated: 2020-10-10
- Resolved: 2020-03-26
The Version table provides details related to the release that this issue/RFE will be addressed.
Unresolved : Release in which this issue/RFE will be addressed.
Resolved: Release in which this issue/RFE has been resolved.
Fixed : Release in which this issue/RFE has been fixed. The release containing this fix may be available for download as an Early Access Release or a General Availability Release.
To download the current JDK release, click here.
Unresolved : Release in which this issue/RFE will be addressed.
Resolved: Release in which this issue/RFE has been resolved.
Fixed : Release in which this issue/RFE has been fixed. The release containing this fix may be available for download as an Early Access Release or a General Availability Release.
To download the current JDK release, click here.
| JDK 8 | Other |
|---|---|
8u281Fixed  |
openjfx11.0.9Fixed |
Description
ADDITIONAL SYSTEM INFORMATION :
Windows 10 x64, Build 18362.356, Version 1903
JRE: 13.0.1 win x64
JavaFX: 13.0.1
This issue also is reproducible with Java 11 but does not occupy when running with java 8.
A DESCRIPTION OF THE PROBLEM :
When there is a scale factor set on windows via windows setting. Then the content inside web canvas will SHRINK accordingly. The exact path to the scale setting on Windows 10 is [Settings] -> [System] ->[Display] ->[Scale and Layout] ->[Change the size of text, app, and other items]. It happens when the value is not 100%
REGRESSION : Last worked in version 8u231
STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
Step 1: Write a simple JavaFX program with just a Webview, and loads following HTML snippet.
================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Demo</title>
</head>
<body>
<canvas id="myCanvas" width="100" height="100" style="width:100px; height:100px;border:10px solid #d3d3d3;transform: scale(1,1)"> </canvas>
<script >
window.onload = function() {
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
};
</script>
</body>
</html>
================
Step 2 : run it with a Java 11/13 with JavaFX
EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
A red square fulfills the gray box.
ACTUAL -
A red square NOT fulfills the gray box.
---------- BEGIN SOURCE ----------
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javax.swing.*;
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
public class JavaFxCanvasIssueReproducer {
public static void main(String[] args) {
JFrame frame = new JFrame("Java FX Canvas Issue Reproducer");
frame.setSize(new Dimension(800, 600));
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
JFXPanel jfxPanel = new JFXPanel();
frame.add(jfxPanel);
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowOpened(WindowEvent e) {
Platform.runLater(
() -> {
WebView webview = new WebView();
WebEngine webEngine = webview.getEngine();
webEngine.setJavaScriptEnabled(true);
BorderPane borderPane = new BorderPane();
borderPane.setCenter(webview);
Scene scene = new Scene(borderPane);
jfxPanel.setScene(scene);
webEngine.loadContent(WEB_HTML);
}
);
}
});
frame.setVisible(true);
}
private static final String WEB_HTML="" +
"<!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <title>Canvas Demo</title>\n" +
"</head>\n" +
"<body>\n" +
"\n" +
"<canvas id=\"myCanvas\" width=\"100\" height=\"100\" style=\"width:100px; height:100px;border:10px solid #d3d3d3;transform: scale(1,1)\"> </canvas>\n" +
"<div>If the gray box is not fulfilled with red, then the defect reproduced sucessfully.</div>\n" +
"\n" +
"<script >\n" +
" window.onload = function() {\n" +
" let c = document.getElementById(\"myCanvas\");\n" +
" let ctx = c.getContext(\"2d\");\n" +
" ctx.fillStyle = \"red\";\n" +
" ctx.fillRect(0, 0, 100, 100);\n" +
" };\n" +
"</script>\n" +
"</body>\n" +
"</html>";
}
---------- END SOURCE ----------
CUSTOMER SUBMITTED WORKAROUND :
Change the scale value at [Settings] -> [System] ->[Display] ->[Scale and Layout] ->[Change the size of text, app, and other items] to 100%.
FREQUENCY : always
Comments
|