0

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.

Ilya Dudarev
  • 35
  • 5
  • You're probably really good at this, but I think this is the first time I see self closing divs. What is the doctype? Is this XML? – Stoycho Trenchev Oct 02 '16 at 18:28
  • Well yes examples are in XML and in HTML at the same time. Correct me if I'm wrong, but as I understand HTML uses XML as data format, so you can close ANY tag at it's end if there is no sub-content. – Ilya Dudarev Oct 02 '16 at 22:19
  • OK but it's not valid HTML5. Is it possible some browsers to have some problems with it? – Stoycho Trenchev Oct 02 '16 at 22:23
  • Looks like self-closed containers-tags can lead to errors, here the [discussion](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5) about it. Anyway my examples are just to show structure, not real html. – Ilya Dudarev Oct 03 '16 at 08:21

0 Answers0