Position issue inside paper-tabs on Firefox

[motss]

paper-badge inside paper-tabs produces different result on the latest version of

• Firefox Windows (Stable, Dev),
• Firefox Linux (Stable, Dev, Nightly), and
• Firefox Android Stable.

The paper-badge is kind of overlapping the tab's content.

Simple Demo to reproduce the issue

Result on Chrome/ Opera

Result on Firefox

[notwaldorf]

Innnteresting. Looks like a bug.

[samuelli]

The root cause is that the slotting behaves differently in Firefox.
In Chrome paper-tab is a parent of paper-badge whereas in Firefox they are siblings.

This results in offsetParent being different and hence are positioned differently. Easy to test this by using left: 0px on paper-badge in both.

I'm not sure what the fix is; is this an issue with a polyfill?

[motss]

In Chrome paper-tab is a parent of paper-badge whereas in Firefox they are siblings.

@samuelli paper-tab is indeed a parent of paper-badge on both Chrome 50 and Firefox 45.0.2.

[samuelli]

@motss you're correct! I must've dragged the element in Firefox.

this.offsetParent is the culprit. In Chrome it points to paper-tab whereas in Firefox it points to div.paper-tab.

[samuelli]

I think there might be a bug in Chrome, since I think div.paper-tab is inheriting position: relative and therefore should be offsetParent.

To make it consistent between Firefox & Chrome, we can ensure div.paper-tab is always the offsetParent by changing the CSS.

I'm not sure which is the correct positioning between Firefox/Chrome though. I suspect we won't want to break what updatePosition() currently does and require use of paper-badge-margin-left to correctly align when using badges inside tabs.

What do you think?

[motss]

@samuelli

I think there might be a bug in Chrome, since I think div.paper-tab is inheriting position: relative and therefore should be offsetParent.

I think the offsetParent is correct on Chrome but not on Firefox because from what I know, offsetParent will get the first element which has position: relative but not position: static. In which case, Firefox actually returns div.tab-content of the paper-tab which has a position: static while in the reduced case the paper-tab is the first element which has position: relative.

I also noticed that transform: translateZ(0) is what renders Firefox to return the div.tab-content as the offsetParent of the paper-badge. By removing that line of CSS hack will cause both Chrome and Firefox to return the correct value of offsetParent in paper-badge which is the paper-tab but this will lead to another problem: Both Chrome and Firefox will produce the exact same result where the paper-badge is overlapping the content of paper-tab.

I'm not sure which is the correct positioning between Firefox/Chrome though. I suspect we won't want to break what updatePosition() currently does and require use of paper-badge-margin-left to correctly align when using badges inside tabs.

That was exactly how I resolved this issue to get rid of the overlapping.

[samuelli]

Awesome, thanks for looking into that. It sounds like we should remove transform: translateZ(0) but it seems that's there for layer promotion. Feel free to send a PR for paper-tabs if you like, otherwise I'll do it tomorrow. Probably should use will-change: transform instead, but need to check it doesn't break while animating for example.

I'm not sure which is the correct positioning between Firefox/Chrome though. I suspect we won't want to break what updatePosition() currently does and require use of paper-badge-margin-left to correctly align when using badges inside tabs.

That was exactly how I resolved this issue to get rid of the overlapping.

Awesome, I think that's the way to go. Update position puts half the badge inside the anchor element by default, which is exactly what we're seeing here, so its best to use margin to correctly align it.

[samuelli]

Btw, @motss, if removing transform: translateZ(0) causes Chrome's behavior to change, isn't that indicating that Chrome's offsetParent is wrong? Offset parent should return the parent who's position the element is relative to.

[motss]

@samuelli
I believe there is a misunderstanding in the last conversation. I did mention that by removing the CSS hack will result in correct offsetParent (which is the paper-tabs) on both Firefox and Chrome but this will affect the Chrome in a way that Chrome will no longer display the correct result where the paper-badge will overlap the content of paper-tab.

And I'm not too sure why there is a CSS hack since there is nothing seems like really need that hack.

Perhaps, there is a need to change the behavior of updatePosition.

[bicknellr]

jquery/jquery#1765

[bicknellr]

https://www.w3.org/TR/css-transforms-1/#transform-rendering

Near the end of the section:

For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

[samuelli]

@bicknellr Thanks for that. This confirms my suspicions that Chrome is incorrect here.

Here's a repro of the issue: http://jsbin.com/dihuhugati/1/edit?html,css,js,output
The green box is clearly offset from the red, so the red should be the offsetParent. I've filed a bug on Chrome.

@motss: Changing the behavior of updatePosition would be a breaking change for anyone using paper-badge, whereas changing just paper-tab will fix the compatibility issue on Chrome. Yes they are overlapping, but as mentioned before that is what paper-badge-margin-left is for.