Question

我正在并排实现两张图片的顶部的热图（使用heatmap.js库），但是这些图片没有出现在Firefox上（它们消失之前会瞬间出现）。但是，当我在Microsoft Edge和Google Chrome上对其进行测试时，图片看起来不错（尽管屏幕右侧有相当大的空间，但这是另一回事了）

这是我的代码：

<html>
<head>
    <style type="text/css">
    .heatmap-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transition: .3s ease all;
        -moz-transition: .3s ease all;
        transition: .3s ease all;
    }

    .heatmap {
        width: 100%;
        height: 100%;

    }


    .option {
        float:left;
        width:48%;
  height:100%
    }

.pictures::after {
  content:"";
  clear: both;
  display: table;
}
    </style>

</head>
<body>
    <div class="heatmap-wrapper" style="width: 100%; height: 100%;">
        <div class="heatmap" style="position: absolute;">

            <canvas width="100%" height="100%" class="heatmap-canvas" style="z-index=2; opacity: 0; left: 0px; top: 0px; position: absolute;">
            </canvas>
            <div class="pictures" style="width:100%; height:100%; z-index=1;">
                <div class="option">
                    <img src="eat.jpg" style="width:100%; height:100%; transform:rotate(90deg)">
                </div>
                <div class="option">
                    <img src="drink.jpg" style="width:100%; height:100%; transform:rotate(90deg)">
                </div>
            </div>
        </div>
    </div>
.
.
<script>
.
.
.

        var body = document.body;
        var bodyStyle = getComputedStyle(body);
        var hmEl = document.querySelector('.heatmap-wrapper');

        hmEl.style.width = bodyStyle.width;
        hmEl.style.height = bodyStyle.height;

        var hm = document.querySelector('.heatmap');
.
.
.
</script>
.
.
.
</body>

任何帮助将不胜感激。

Answer 1

我能够重现此问题。当我在样式中添加以下内容时为我工作

 html,body{
    height:100%;
}

也添加

<meta charset="utf-8"/>

解决了firefox中的“未声明HTML文档的字符编码。”警告。

图片未出现在Firefox上

1 个答案: