/    Sign up×
Community /Pin to ProfileBookmark

Firefox 1.5 overflow:auto bug

Copy linkTweet thisAlerts:
Jan 19.2006

Hi:

I am having a strange flickering effect in a div using overflow:auto. That happens when I click on thumbnails I use to trigger image changes in another div and when firefox window vertical scrollbar isn’t present. If firefox window vertical scrollbar is present there is no problem at all. IE shows everything OK.

You can check that problem following this link [URL=http://www.addington.net/newebsite/flickering.html]flickeringtest[/URL]

Any help will be appreciated ?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJan 19.2006 — I actually think it has to do with the onclick of those thumbnail links registering as a change in the browser's location.

First of, your onclick="" attributes don't need the javascript:. onclick is javascript. Lastly, before the closing quote in your onclick attribute, add return false; to nullify the link getting clicked, yet will still let your transformation effect work.

Gecko-based browsers have a funny quirk, not necessarily bug, that makes the page seem kitty wompus when the browser if rendering the page. Not nullifying the link click causes Firefox (which runs on Gecko) to rerender the page, thus you see an occasional "jump" in certain boxes.

I'm willing to bet that nullifying the link click will prevent this quirk.
Copy linkTweet thisAlerts:
@eduarperuauthorJan 19.2006 — Hi:

Thanks for helping me. I am new in all of this and eager to learn.

I changed onclick to

onclick="crossfade(document.getElementById('imgloadarea'), 'images/WHL100_Overall.jpg', '1', 'Overall view'); return false;"

but the jumping box is still there ?
Copy linkTweet thisAlerts:
@drhowarddrfineJan 19.2006 — You have a lot of CSS validation errors and are using IE-specific code that won't work anywhere else.
Copy linkTweet thisAlerts:
@toicontienJan 19.2006 — ahhhh. Something else is amiss. In FF 1.5, I noticed that the fading-in image isn't positioned correctly. In fact, it's positioned off screen almost. Then once the cross fade effect has run its course, the fade-in image appears in the correct spot.

Taking drhowarddrfine's advice about validating your CSS might be a good idea if there are syntax errors. Internet Explorer-only CSS filters will be caught as errors, but since browsers are programmed to ignore invalid or non-supported CSS properties, browser-specific CSS properties don't hurt anything.

In the markup validator I've got for Firefox, it says:

line 63 column 2 - Warning: <div> attribute "width" has invalid value "160px"

Change [b]<div width="160px">[/b] to [b]<div style="width:160px;">[/b] and see if that helps too. There is no width attribute for DIV tags.

Use the [url=http://validator.w3.org/]W3C's Markup Validtor[/url] to find HTML errors and then fix them. [url=http://jigsaw.w3.org/css-validator/]Make sure there aren't any glaring syntax error's in your CSS[/url], then we'll chase after browser bugs.
Copy linkTweet thisAlerts:
@eduarperuauthorJan 20.2006 — Thanks for your help. I have been working cleaning my codes and now html and css have been validated. There are no errors and warnings. In order to isolate the problem I took out all non related coding. The jumping box is still there. I could stop the problem only disabling the overflow:auto, but that is what I don't want to do because I need the scrolling capability to show several text paragraphs. :o

Check this out again:

[URL=http://www.addington.net/newebsite/flickering.html]flickeringbug[/URL]
×

Success!

Help @eduarperu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...