Closed Bug 275748 Opened 20 years ago Closed 20 years ago

CSS hover before/after content rule causes flickering, and box growth

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows ME
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: giaym, Unassigned)

Details

Attachments

(1 file)

A testcase zip with an html page and its css file.
1.94 KB, application/x-zip-compressed
Details 
I use <ul>s to create Navigation columns. I noticed flickering on them while
hovering, after 'debugging' i found out the problem was this content rule:

.nav a:hover:after, .nav a:focus:after
{	content: " [" attr(accesskey) "] ";
}

This stylesheet worked fine on Netscape 7 and Firefox 0.8.

Also, having the content rule at hovering makes the <ul> grow "one <li>" height,
that destroys the layout if <body>'s height is the same as the nav column and
you have bottom positioned elements (the <ul> grows making the nav column grow
making <body> grow but the bottom positioned elements dont move, resulting in
white space at the bottom)
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: firefox.general → core.layout
Version: 1.0 Branch → 1.7 Branch
Could you perhaps show an example of this? Or attach a testcase?
Ok, an html file and its css.

* Load the page and put your muse over the links.
1. Flickering.
2. The new content makes the box grow. This can break layouts. I'll post an
example of that if you need.


* Now open the css file.
Go to the bottom, delete or comment any or both the 'content: " ["
attr(accesskey) "] ";' rules.
Refresh the page and try again.

I didnt have the flickering problem with Firefox 0.8 if that helps.
Should i post a separate bug for the growing box?
Comment on attachment 169532 [details]
A testcase zip with an html page and its css file.

test
Comment on attachment 169532 [details]
A testcase zip with an html page and its css file.

Just to say the testcase includes the growing box example, put your mouse on
the nav column to the right.
Now put it over the left column.
I can see the flickering with the testcase, using Mozilla1.7, but I can't see it
anymore with current trunk build. I think this has been fixed somehow, already.
Giancarlo, you can try the trunk build yourself to test this bug:
Mozilla trunk build:
http://ftp.scarlet.be/pub/mozilla.org/mozilla/nightly/latest-trunk/mozilla-i586-pc-msvc.zip

Firefox trunk build:
http://ftp.scarlet.be/pub/mozilla.org/firefox/nightly/latest-trunk/firefox-1.0+.en-US.win32.zip
Worksforme on trunk too.  Marking so, but please reopen if this can be seen in a
current build.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → WORKSFORME
This was issued when firefox 1.0 was out, when tested with the trunk the bug
didn't show up.
But now firefox 1.01 is out and the bug is still there, and now I tested with
the latest build, yeah its there both the flickering and box growth. Just check
the testcase.

Should I open separate threads for these bugs, or is it ok to leave them
together. Also, is it ok to post it as Core or should it be under Firefox (it
has no Layout component option though).
Status: RESOLVED → UNCONFIRMED
Resolution: WORKSFORME → ---
Summary: CSS hover before/after content rule causes flickering → CSS hover before/after content rule causes flickering, and box growth
Version: 1.7 Branch → Trunk
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → WORKSFORME
nvm, I uninstalled and now the nightly build works, v1.01 doesn't work though.
1.0.1 is just 1.0 with security fixes.  1.1 is what will have trunk fixes.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: