1197602 - Findbar overlaps devtools during animation when it opens and closes (because of opacity < 1 )

Status: NEW

(Firefox :: Theme, defect)

Description

[arni2033]

Attachment: Findbar overlaps devtools during animation.png

STR:   (Win7, Nightly 43.0a1 (2015-08-20))
1. Open new tab.
2. Press Ctrl+F to open Findbar.
3. Open DevTools (F12), set Dark theme for devtools.
4. Click the close button on Findbar.

Result:       Findbar overlaps devtools during animation and it looks like DevTools tabs flicker.
Expectations: Findbar shouldn't overlap devtools.

Comment 1

[arni2033]

Attachment: screenshot - opacity affects layout.png

Oh, it's that case when opacity affects the visual placement of elements   :(

To reproduce this, (1) apply the following style (I tried it using extension "Stylish"), then (2) open new tab, (3) open findbar, (4) open devtools.
>   @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
>   @-moz-document url("chrome://browser/content/browser.xul"){
>     findbar{
>       margin-bottom: -15px;
>       opacity: 0.99;
>     }
>   }
Note that if I set "opacity:1;" to findbar, it's aligned fine. If I set opacity < 1, it's aligned "above" devtools. This is what I ment in the 1st line of this comment.

Comment 2

[arni2033]

The lazy fix here is just removing opacity transition when <findbar> gets [hidden="true"] attribute
Mike, I'm asking you, because I saw you discussing that transition in bug 1196247

Comment 3

[Mike de Boer [:mikedeboer]]

Thanks for the n-i! I see what the problem is, however I don't think it's findbar's fault that there's overlap between animations. AFAIK this has to be a layout/ rendering optimization bug that causes a few layout recalculations to be skipped.
I think the screenshots might give dbaron just about enough information to make a useful comment here... I hope! :)

Comment 4

[arni2033]

I'll add another STR (tell if it requires another bugreport)
1. Press Ctrl+F to open findbar
2. Press Ctrl+Shift+M on this page to open adaptive design
3. Choose resolution 1000×400 (or other resolution, just make sure that findbar is visible on screen)
4. Click close button on findbar

Result:   The bottom resizer is displayed "above" the findbar after Step 3, but it's displayed "under"
          the findbar during the opacity transition. Once again, it happens because of opacity < 1

Comment 5

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Could you ask the question in English sentences?  I'm really not sure what it is you're looking for.

Comment 6

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

OK, I guess I think I understand what you're asking.

Having non-1 'opacity' changes the z-ordering rules in CSS, because 'opacity' requires that something be composited as a single unit, and making it atomic requires pulling it out of a bunch of other interleaved stuff.  The pulling out effectively ends up meaning that it sorts higher.

While I can't figure out how to use inspector on the browser chrome (although I seem to remember having done that in the past, although maybe that was the old DOM Inspector), it seems like this is probably expected behavior, and that if the chrome is just animating 'opacity' and 'margin', then the animation of 'opacity' may well cause the find bar to appear above devtools when opacity is between 0 and 1; the devtools would need something like 'position:relative' to pull it into the same layer.

Comment 7

[Mike de Boer [:mikedeboer]]

(In reply to David Baron [:dbaron] ⌚UTC-7 from comment #6)
> OK, I guess I think I understand what you're asking.

Thanks for this explanation, despite the phrasing of my question being inadequate.
I understand what's going here now and I don't think this is something I can do something about - at least not right now considering the priority of other things that can be worked on.

Thanks much!

Comment 8

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Adding 'position: relative' to the devtools panel might be a trivial fix, actually.  (Although it's possible that it would have other performance effects, but it seems unlikely to be problematic.)

Comment 9

[arni2033]

Setting "position: relative; z-index: 1;" to .browserStack seems to fix issue in comment 4, but adds .browserStack's shadow on top of findbar: http://ssmaker.ru/777b01dd.png
Should I open another report about comment 4? Btw I don't find current alignment good for small resolutions: see the same screenshot - resizer is placed above "highlight all" and "match case" buttons