CSS Popup window, tricky target

I've encountered a problem to select element in prety common sitiation.

Let's say we have a page. Popup consists of fullscreen backround(tint), scrollable dialog, and a fixed close button at the background corner.

The behaviour I'm trying to achieve is to highlight close button when mouse is over background but not over dialog.

It is easily completed whith this structure:

<div class="page"/>
<div class="background"> // position:fixed; overflow: auto;
    <div class="popup"/>
    <div class="close-button"/> // position: fixed opacity: 0.6;
</div>

And CSS selector would be:

.background:hover .popup:not(:hover) + .close-button {
    opacity: 1;
}

But then I found a bug: On iOS devices, when -webkit-overflow-scrolling: touch is set to make popup scrolled smoothly and with inertia (default ios scroll), the close button which have location: fixed, starts to glitch up and down trying to compensate scroll with delay.

The only solution is to move close button outside of background(next to it)

<div class="page"/>
<div class="background"> // position:fixed; overflow: auto;
    <div class="popup"/>
</div>
<div class="closee-button"/> // position: fixed 

But I can't create right CSS selector for this structure, which will include background, popup and close button.