search

mohamedmansour / my-hangouts-extension

My Hangouts for Google Plus Chrome Extension
https://plus.google.com/116935358560979346551/about
Other
35 stars 9 forks source link

UI Bug: displaced container #25

Closed marmat closed 12 years ago

marmat commented 12 years ago

In some instances, when opening the extension, the #popup-container is displaced by a certain amount of pixels. See the screenshot below for reference.

UI Bug

The whole #popup-container is displaced by exactly 380px to the left. After toggling the position attribute of #popup-container off and on again in the inspector, the content will be shown correctly.

I'll try to figure out why this happens, but maybe some CSS-god is present here and knows the answer already ;-)

Tested on the latest commit (a686e7b) with Chrome 17.0.963.12 dev

mohamedmansour commented 12 years ago

Hi Martin,

This is a super awkward bug, I hope CSS position is not broken on DEV, does someone else have Mac to verify this? I will try to steal my cousins Mac if I can, but I will be travelling Away from Keyboard this weekend aahh :(

marmat commented 12 years ago

Oh, I forgot to add: my operating system is Ubuntu Linux (Oneiric), not Mac OS

mohamedmansour commented 12 years ago

Hmm nice skin :)

marmat commented 12 years ago

Just some notes after analyzing the problem a bit:

1) When the bug appears (i.e. the #popup-container is displaced), the only way to fix the issue without reopening the extension is to open the tabs in such a way that no tab is positioned right of the currentPage, that means both inactive views (hangouts and maps) should be positioned to the left (left: -600px). After that, switching between tabs works normally and the container is not displaced anymore. That means as soon as the very right border of the content (i.e. not the visible but the total one) moves, the bugs seems to fix itself (?)

2) The actual offset is kind of random. Sometimes it's the above mentioned 380px, sometimes more, sometimes less, it's everything a bit weird...

3) In most cases when the bug appears, the input box of the options page (the "Choose your circles..." one) is focused. However...

4) ...it seems that it's not the content of the pages that cause the bug. I tried to disable (comment out) both the maps and the options tab (separately), but the bug still continued to appear. So I'm pretty sure that it's the CSS which causes troubles. Unfortunately, I couldn't figure out what exactly causes it. If anything changes in this respect, I'll let you know.

mohamedmansour commented 12 years ago

Hey Martin, I kinda reproduced this,

  1. Open the popup
  2. Scroll your mouse to the right (SELECT and scroll way to the right)
  3. You will see the page move like you are.

When I mean, scroll, I meant you select the text from left to right and you will see the other divs appears:

Could it be a user error, that you slided your mouse a bit or something? There must be a better way to do this, perhaps I would need to hide/show the divs before we navigate so the DOM wont think there are stuff there.

mohamedmansour commented 12 years ago

Hey Martin,

I did a quick web inspector test, and I believe this problem will be resolved if we hide all the divs (tabs) and show them when we need to. I believe that would be the solution we could do to fix that UI Bug.

marmat commented 12 years ago

Hi Mohamed,

unfortunately no, I don't think it is/was a user error. Here, the bug appears simply by clicking the extension icon, without moving the mouse or doing anything else at all.

marmat commented 12 years ago

@mohamedmansour You're right, that is a solution to the problem. Setting the non-current divs to display:none made the currentPage align correctly.

Are you going to update the code or shall I go for it?

mohamedmansour commented 12 years ago

@kaktus621 can you please do it, cause I can't reproduce it the way you do. Feel free to refactor anything :) (Make sure you rebase your master with my origin/master too! @johnbc update the hangouts algorithm a bit this morning so we could make it better!

mohamedmansour commented 12 years ago

Fixed in latest build