User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.94 Safari/534.13 Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110210 Firefox/4.0b12pre An invalid (non-functional) scroll bar is present in the Panorama View (group view) where the AppTabs icons should be displayed (on the right margin of a group) Reproducible: Always Steps to Reproduce: 1. Launch Firefox on a new profile 2. Open 7 or more tabs with different webpages loaded in them 3. Pin 5 of them as AppTabs leaving 2 or more normal tabs 4. Enter GroupView (Panorama) 5. Resize the group to minimum possible Actual Results: 5.Stack view is visible, but an invalid (non-functional) scrollbar is visible as well, where the AppTabs icons should be displayed. Expected Results: 1.Firefox should launch with 2 tabs open (startpage and mozilla page) 2.Seven or more different tabs should be opened 3.Five AppTabs and 2 or more normal tabs present 4.Group View with one group present: 2 or more thumbnails and 5 appTabs (icons positioned on the right margin of the group) 5.Icons should display properly (stack view of the thumbnails and AppTabs icons) See attachements for screenshots
Attachment #511404 - Attachment description: TabView normally displaying AppTabs → tab bar normally displaying AppTabs
Attachment #511405 - Attachment description: GroupView displaying AppTabs with ScrollBar → Panorama displaying AppTabs with ScrollBar
I am confirming issue - setting resolution to New.
Status: UNCONFIRMED → NEW
Ever confirmed: true
I cannot reproduce the issue on Ubuntu 10.04 (Linux): http://img.i7m.de/show/j65tw.png Nonetheless, the render looks familiar. I did see this appearing when the truncation ellipsis was too big. Andrei: do you have a custom Firefox theme / persona? Do you have a custom Windows theme? Dao / Ian: the problem is somwhere in tabview.css, in the properties of .appTabTrayContainerTruncated:after. I know that having bottom: 0 caused the scrollbar to show for me as well. I believe this is caused by one bug related to bug 631112 or bug 631114 which I found while working on bug 595965. There's some weirdness with the columns implementation. :) To work around the problem here, perhaps we need to increase the value of the bottom property. Still, I wonder why it happens, because element height is always 15px, line-height is also always 15px, so irrespective of fonts and other system configs... it should not overflow. Thoughts?
Why exactly are you using overflow-x: hidden? Note that this implicitly sets overflow-y: auto.
(In reply to comment #5) > Why exactly are you using overflow-x: hidden? Note that this implicitly sets > overflow-y: auto. Because .appTabTray is wider than .appTabTrayContainer. The container is sized to be 20% of the groupitem width. The columns are truncated by reducing the width of the container, hence the need for overflow-x: hidden. Sure, overflow-y is auto by default.
No, it's "visible" by default.
(In reply to comment #7) > No, it's "visible" by default. And would this difference (from visible to auto) cause the problem? I could try to set a calculated height from the TabView GroupItem.adjustAppTabTray() function, for the container as well, and just go ahead with overflow:hidden, to always avoid scrollbars. Would this be fine?
(In reply to comment #8) > (In reply to comment #7) > > No, it's "visible" by default. > > And would this difference (from visible to auto) cause the problem? Yes, auto gives you scrollbars on overflow.
(In reply to Comment #4) I did a regression range and here are the results: WFM on: build: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110208 Firefox/4.0b12pre build config: http://hg.mozilla.org/mozilla-central/rev/3470891975c7 Reproduceable on: build: Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110209 Firefox/4.0b12pre build config: http://hg.mozilla.org/mozilla-central/rev/fd0817e454fe *Note: The theme for the OS is the Windows 7 one (with aero) For Firefox there is nothing installed (all are default and on a clean profile)
Proposed fix. Simply set overflow:hidden for .appTabTrayContainer. This works because the GroupItem.adjustAppTabTray() method sets the correct width and height for the element, so overflow:hidden won't cause issues, it only makes sure the scrollbar won't show. Someone should test this on Windows and Mac. On Linux it renders fine. Thanks!
Assignee: nobody → mihai.sucan
Status: NEW → ASSIGNED
Attachment #511687 - Flags: review?(ian)
Can you use overflow: -moz-hidden-unscrollable?
Updated the patch to use -moz-hidden-unscrollable - it works. Thanks Dão! (I should check MDN and Mozilla's CSS extensions more often, hehe. :) )
Comment on attachment 511786 [details] [diff] [review] updated fix Asking Dão for review.
Attachment #511786 - Flags: review?(ian) → review?(dao)
Note to approvers: ridiculously light footprint (3 CSS lines changed); r+ from Dão; fixes bad, confusing UI glitch introduced recently.
Attachment #511786 - Flags: approval2.0? → approval2.0+
Thanks for the review+ Dão and for the approval Dolske!
Version: unspecified → Trunk
Status: ASSIGNED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 4.0b12
Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110215 Firefox/4.0b12pre Verified issue and it's no longer reproducible.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.