browser specific rendering bugs with "floating" table headers. [#213375]

Comment	File	Size	Author
#16	tableheader-ffmac-ie7-fix-b.patch	1 KB	dvessel

#8	Picture 4.png	29.8 KB	rayarub
#6	tableheader_ie7_floating.patch	316 bytes	rayarub

#5	tableheader-ffmac-ie7-fix.patch	970 bytes	dvessel

#1	ff2-scroll-fixed-intersect.png	38.68 KB	dvessel
	screen.png	42.02 KB	NecroHill

Comment #1

dvessel CreditAttribution: dvessel commented 23 January 2008 at 20:13

Title:	thead th bug (with "floating" table header ) in style.css	» browser specific rendering bugs with "floating" table headers.
Priority:	Normal	» Minor
Status:	Needs review	» Active

File	Size
ff2-scroll-fixed-intersect.png	38.68 KB

I noticed this a while back. It's specific to IE7 & Garland. Another quirk is in FF for the mac when the hidden headers intersect with scroll bars. This always happens with position: fixed outside of this situation.

This can be remedied by pushing the headers outside the viewport when it's hidden with a top: -9999px.

Log in or register to post comments

Comment #2

NecroHill CreditAttribution: NecroHill commented 24 January 2008 at 13:32

I have made a mistake it should be \modules\system\system.css instead of \modules\system\style.css
sorry about that

Log in or register to post comments

Comment #3

jrabeemer CreditAttribution: jrabeemer commented 24 January 2008 at 17:30

Necrohill, please make a patch that we can test. This is a *serious* CSS bug that needs to get fixed ASAP.

Log in or register to post comments

Comment #4

NecroHill CreditAttribution: NecroHill commented 24 January 2008 at 20:15

I do not know how to make this patch, to be honest.
my solution is:
in modules\system\system.css find

thead th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}

and replace for:

thead th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
  position:relative;
  background:#FFFFFF;
}

It will be appreciated if someone make a patch :)

Log in or register to post comments

Comment #5

dvessel CreditAttribution: dvessel commented 24 January 2008 at 20:26

Status:

Active

» Needs review

File	Size
tableheader-ffmac-ie7-fix.patch	970 bytes

Necro, ~~It's specific to Garland, not system wide.~~ The IE7 issue is also specific to the module administration page where there are multiple tables thus multiple floating headers.

Here's a patch, it works around the FF Mac issues also by using the "display" property instead of "visible" right from tableheader.js.

Log in or register to post comments

Comment #6

rayarub CreditAttribution: rayarub commented 27 January 2008 at 21:12

File	Size
tableheader_ie7_floating.patch	316 bytes

Confirmed that the CSS changes in #4 seem to fix the IE problem. I rolled a patch and it seems to work. However this is the first time I've made a patch so there might be problems.

(Aside: The patch in #5 seems to cause the header to stop floating in FF 2 and Safari 3 on Mac OS X 10.5. In IE7 on Vista, the line no longer appears at the top, but the header also does not float properly (screenshot attached.))

Log in or register to post comments

Comment #7

dvessel CreditAttribution: dvessel commented 27 January 2008 at 21:36

rayarub, check again by refreshing your browsers cache. Patch #5 still applies, I already tested with the browsers listed. Adding more style rules is more likely to grow the cruft down the line. –heh, that made no sense but you know what I mean.

Log in or register to post comments

Comment #8

rayarub CreditAttribution: rayarub commented 27 January 2008 at 22:01

File	Size
Picture 4.png	29.8 KB

I refreshed the cache and dumped the drupal cache, but no luck; the headers do not float in my Safari or FF after applying that patch.

Here's a screenshot of the issue I'm seeing now in IE (you can see the line running through "administer content types").

Log in or register to post comments

Comment #9

dvessel CreditAttribution: dvessel commented 27 January 2008 at 22:07

Version:

6.0-rc2

» 6.x-dev

Strange.. You working from latest Head in CVS? It works perfectly fine on my end.

Log in or register to post comments

Comment #10

jrabeemer CreditAttribution: jrabeemer commented 28 January 2008 at 17:27

Ok somebody decide which patch to go with and test ie. which is smallest, fastest, and works in all browser?

Log in or register to post comments

Comment #11

rayarub CreditAttribution: rayarub commented 29 January 2008 at 18:41

No, I was working on the RC2 release. I tested it on the latest HEAD and it works fine... sorry about that.

Log in or register to post comments

Comment #12

jrabeemer CreditAttribution: jrabeemer commented 1 February 2008 at 19:51

Priority:

Minor

» Critical

I tested both patches #5 & #6. They both work, however, 1. this is a Garland issue, 2. rayarub's patch, it causes the floating header to float *under* the table header and overlaps text. It also seems to reduce the vertical height of the tableheader blue line by 1px. It all just looks weird. dvessel's patch causes Opera 9.5beta (w/1.2.3 jquery) to misfire the tableheader event, and it sometimes fails to scroll the tableheader. This maybe a future bug with jquery 1.2.3 along with this patch.

+1 dvessel's patch

Marking critical because this is a front-facing in-your-face IE7 bug that is easy to fix.

Log in or register to post comments

Comment #13

jrabeemer CreditAttribution: jrabeemer commented 1 February 2008 at 20:09

Status:

Needs work

» Needs review

dvessel, there's a corner case bug with your patch in IE7.

1. Apply your patch
2. Go to admin/build/modules
3. Expand Core-required
4. Shrink your browser window height to 150px or less.
5. Watch the viewport move up and down in an infinite loop as the tableheader appears and disappears.

Log in or register to post comments

Comment #14

catch

he/him

English

CreditAttribution: catch commented 1 February 2008 at 20:07

Status:

Needs review

» Needs work

Log in or register to post comments

Comment #15

chx CreditAttribution: chx commented 1 February 2008 at 20:25

150px or less? Opera 9.5 beta and future jQuery? Hardly we care about those.

Log in or register to post comments

Comment #16

dvessel CreditAttribution: dvessel commented 1 February 2008 at 20:33

Priority:

Critical

» Normal

File	Size
tableheader-ffmac-ie7-fix-b.patch	1 KB

That's quite a corner case. If your testing with jQuery 1.2.3 then it could be this issue affecting 9.25 as well. It does this odd swapping [jquery site] of the display property when .offset() is used. Could be interfering with the display property being set.

The patch doesn't apply any longer so here it is again.

Don't think this qualifies as critical. Nothing breaks, it's simply a rendering glitch.

Log in or register to post comments

Comment #17

jrabeemer CreditAttribution: jrabeemer commented 1 February 2008 at 20:38

I reverted to 1.2.1 jQuery, I still get the looping IE7. I will say that doesn't kill the patch since I don't know why anyone would shrink their window to less than 150px.

Log in or register to post comments

Comment #18

dvessel CreditAttribution: dvessel commented 1 February 2008 at 20:43

momendo, I tried to recreate the looping and couldn't so, I think you'd have to be very lucky to run into this. :)

edit: never mind that. I did reproduce but it wasn't in an endless loop. Just a little flickering and it stops.

Log in or register to post comments

Comment #19

jrabeemer CreditAttribution: jrabeemer commented 2 February 2008 at 15:13

Status:

Needs review

» Needs work

I tested successfully in IE7, Safari 3.0.4, Opera 9.5beta, FF2.

dvessel: I can get it to flicker infinitely. You have to get it in position just right. This is hard to reproduce, I agree. The only fix I can think of is to scan the viewport window, if it's below a certain height, say 150px for example, then turn off the tableheader event.