Material-UI 选项卡在 JavaFX WebView 中不起作用

Question

我有一个使用 React 和 Material-UI 的网页，我想使用 JavaFX 的 WebView 将其嵌入到我的桌面应用程序中。但是，当我尝试这样做时，Material-UI 中的选项卡无法按预期工作。我第一次单击一个选项卡时，它按预期工作，显示该选项卡的内容，并且该选项卡被标记为活动选项卡。此后它停止工作，您无法切换标签。

要重现该问题，以下代码就足够了：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class TabTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        BorderPane pane = new BorderPane();
        Scene scene = new Scene(pane);

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();

        webEngine.load("http://www.material-ui.com/#/components/tabs");

        pane.setCenter(webView);

        primaryStage.setScene(scene);
        primaryStage.setMaximized(true);
        primaryStage.show();
    }

    public static void main(String[] args) throws Exception {
        Application.launch(TabTest.class);
    }
}

目前的观察结果：

• 标签适用于常规网络浏览器。
• 在它停止工作后，整个网页似乎都会响应点击（Material-UI 点击动画随处触发）。我在 Material-UI Tab 组件中添加了日志记录，并且 onTouchTap 在从第一次单击时选择的选项卡上触发。

有谁知道问题可能是什么以及是否有任何解决方法？还是我应该将此作为 JavaFX 错误提交？

Answer 1

我为 Java 8 找到了解决此问题的方法。添加

{
display: inline;
position: relative;
}

到每个Tab的样式