: Safari does not freeze

Question

In Safari CSS: hover is still active after a child with a fixed position is open, then closed outside the parent.

It works again after the mouse is reintroduced into the hover zone.

Demo: http://jsfiddle.net/HSC8N/2/
Tested on Safari 7.0.1 on MacOS, it should also appear on iOS. It works at least on Chrome 32, Firefox 27, IE9, and IE10.

EDIT: here's the problem video: http://youtu.be/wF_g3OQALqc

<div ng-app ng-init="show = false">
    <div class="hover-stuff">

        <div ng-click="show = true">click to open</div>

        <div class="fixed-bg" ng-show="show" ng-click="show = false">click here to close</div>
        <div class="popup" ng-show="show">Great Popup</div>

    </div>
</div>

CSS:

.hover-stuff:hover {
    background: red;
    ...
}

.fixed-bg {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    ...
}

.popup {
    position: fixed;
    ...
}

PS: angular is only here to install display: none/blockin .fixed-bgand.popup

Answer 1

Chrome 34 FireFox 28 Mac, . , , , , , . div, ?

:

<div ng-app ng-init="show = false">
    <div>
        <div class="hover-stuff" ng-click="show = true">click to open</div>
        <div class="fixed-bg" ng-show="show" ng-click="show = false">click here to close</div>
        <div class="popup" ng-show="show">Great Popup</div>
    </div>
</div>