Question

我有以下标记（和JS代码）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Visibility test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<p id="vistest">This line should fade-in after 3 seconds</p>
<script>
setTimeout(function () {
    document.getElementById('vistest').className = 'active';
}, 3000);
</script>
</body>
</html>

和main.css：

#vistest {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#vistest.active {
    visibility: visible;
    opacity: 1;
}

你可以view the example online（唉，JSFiddle不能在BB OS 10浏览器中工作，所以你不能玩它）。

在我尝试的任何浏览器中，3秒后文本行中的淡入淡出。但是，在我的BlackBerry手机（带有OS 10.3.1.1779的Q10）上，文本不会出现。在测试网站上，此方法应弹出菜单，其他元素样式（如:hover和background-color）在更改待填充的class后也未应用元素active。

我尝试使用手机的内置网络检查器，似乎禁用transition样式会使元素显示，但再次启用转换规则时它不会再次消失。此外，我在开发人员工具中启用桌面模式时设法显示所述菜单，但我现在无法重现这一点。此外，强制用户在手机上手动启用桌面模式当然是不行的。

这是一个浏览器错误吗？它能以这种或那种方式被规避吗？

BlackBerry OS 10浏览器的转换问题

0 个答案: