我在并排的两张图片上实现了一个热图(使用 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>
非常感谢任何帮助。
最佳答案
我能够重现这个问题。当我将以下内容添加到样式时为我工作
html,body{
height:100%;
}
同时添加
<meta charset="utf-8"/>
解决 firefox 中“未声明 HTML 文档的字符编码。”警告。
关于javascript - 图片未出现在 Firefox 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55084743/