search

KawaiiBASIC / classilla

Automatically exported from code.google.com/p/classilla
0 stars 0 forks source link

Ghost bar [apple.com] #91

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
On Apple's site with the overflow branch, the "options bar" (Apple, Store,
Mac, iPhone, etc.) gets ghosted over to the right. Occasionally this ghost
bar gets focus, making it impossible to click anything. Refreshing the page
fixes it, but it's very annoying. This is a high profile site, so I'll mark
it High.

What is most interesting is that the Apple Store does NOT have the ghost
bar problem, so we should start by comparing the CSS between them.

Original issue reported on code.google.com by classi...@floodgap.com on 21 Jan 2010 at 6:41

GoogleCodeExporter commented 9 years ago 
Is this related to issue 96?

Original comment by classi...@floodgap.com on 23 Jan 2010 at 7:24

GoogleCodeExporter commented 9 years ago 
DOM Inspector seems to think the padding/border(??) is different. On 
www.apple.com,
globalheader has space BELOW the bar. On store.apple.com, the space is ABOVE it.

Original comment by classi...@floodgap.com on 12 Feb 2010 at 10:12

GoogleCodeExporter commented 9 years ago 
This is the margin. Box model for globalheader has margin-bottom: 18px on the
offending pages, but margin-top: 18px on the store page. Border, padding, 
position
and size are (within rounding) identical.

Comparing the rest:
Font size on bad box is 12px, font size on good box is 10px.

Line height on bad box is 18px, good box 17px.

Text-align on bad box is start, good box left.

Z-index on bad box is 9998, good box 255.

Now to pick out signal from noise

Original comment by classi...@floodgap.com on 12 Feb 2010 at 10:30

GoogleCodeExporter commented 9 years ago 
Test case:
http://www.floodgap.com/software/classilla/bleh/apsh/

(ignore the GOOD and BAD, they're the same case essentially). Changing any of 
the
above didn't fix. But it *is* fixed by removing display:inline from 
#globalheader
#globalnav li, which is also not in the store CSS.

Original comment by classi...@floodgap.com on 13 Feb 2010 at 12:01

GoogleCodeExporter commented 9 years ago 
A simple minded change to ignore display:inline on <li> just made other sites 
look
bad, so we really can render the :inline, it's more the combination.

If position:relative is removed from #globalheader, then we see "only" the 
ghost,
implying the "correctly" positioned bar is the ghost, not the apparent one!

Original comment by classi...@floodgap.com on 13 Feb 2010 at 1:30

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Changing overflow makes the bar act sane, even if it still doesn't display 
totally
correctly, which again is suspiciously like issue 96.

Original comment by classi...@floodgap.com on 17 May 2010 at 6:57

GoogleCodeExporter commented 9 years ago 
Mostly solved by issue 96. Wontfixing the rest of it since it's blocked on 
issue 1.

Original comment by classi...@floodgap.com on 30 May 2010 at 7:11