Css, Safari :hover and child visibility - css

Question

I have one issue with Safari. My page displays a video player with some controls that are made visible (visibility: visible) when the mouse move over the player.
This "effect" is achieved with a simple CSS rule that fails under Safari.
<div class="player">
<!-- ... -->
<ol class="player-controls">
<li>Prev.</li>
</ol>
</div>
.player-controls li {
visibility: hidden;
}
.player:hover .player-controls li,
.player .player-controls:hover li,
.player .player-controls li:hover,
.player:fullscreen .player-controls li {
visibility: visible;
}
I have a codepen with the full version: https://codepen.io/gervaisb/pen/WNQbvXE
I have the same issue with the :fullscreen pseudo class that I use to display one button in fullscreen only.
How can I change the visibility of some childs when the parent is :hover (or :fullscreen) within Safari ?
Thanks

Answer 1

I was not able to find a solution.
So I decided to use JavaScript to solve my issue. onmouseover and onmouseout are used to toggle the visibility.
Later I found that Safari does not play well with selector groups (having many selectors separated by a comma). And I had to duplicate my style to keep the hover effect on Css for other browsers and another identical style under a class for Safari.
/* This does not work
.controls button:hover,
.controls button.is-hover */
.controls button:hover {
background-color: white;
color: blue;
}
.controls button.is-hover {
background-color: white;
color: blue;
}
var controls = document.querySelectorAll('.video-controls li');
var showControls = function() {
controls.forEach(function(control){
control.style.visibility = 'visible';
});
};
var hideControls = function() {
controls.forEach(function(control){
control.style.visibility = 'hidden';
});
};
document.querySelectorAll('.container, .controls, .controls li, .controls button').forEach(function(el){
el.onmouseover = showControls;
el.onmouseout = hideControls;
});
This solved all the similar issues with pseudo classes like :hover and :fullscreen.
Note that hideControls and showControls should be mergeable via one bounded function; el.onmouseover = setVisibility.bind('visible'). But I did not tried.