I have the following markup (and JS code):
<!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>
and main.css:
#vistest {
visibility: hidden;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#vistest.active {
visibility: visible;
opacity: 1;
}
You can view the example online (alas, JSFiddle doesn't work in the BB OS 10 browser, so you can't play with it).
In any browser I tried, this faded in the line of text after 3 seconds. However, on my BlackBerry phone (a Q10 with OS 10.3.1.1779) the text doesn't appear. On a test site, where this method should pop up a menu, other element styles like :hover and background-color were also not applied after changing the class of the to-be-faded-in element to active.
I tried to use the built-in web inspector of my phone, where it seems that disabling the transition style makes the element appear, but it doesn't disappear again when the transition rule is enabled again. Also, I managed to show the said menu when enabling desktop mode in the developer tools, but I can't reproduce this now. Also, forcing the users to manually enable desktop mode on their phones is of course a no-go.
Is this a browser bug? Can it be circumvented one way or another?