4

I am having some issues lately which I discovered, tried out everything I possibly could, without any success. Anyway, lets get to the point: I have some text, and I have a title in strong (i.e. using the default strong tag), and I am facing some issues with this, for some reason the title part jumps up while scrolling down, while the content (body) text stays fixed without jumping up, how can I fix this?

Here's the CSS for my title text:

.title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 8px;
    max-width: 282px;
    white-space: nowrap;
}

Thanks in advance!

EDIT: Sorry, I had done some issues within that code, here's the one which reproduces the same issue i.e. text jumps on scroll:

http://jsfiddle.net/WL67y/7/

Screenshot:

enter image description here

(Left) This is the title text before scroll, (Right) after the the scroll or while scrolling down.

Seems like there are issues with my FF, not sure of why, it seems to have issues to render on the screen, the same thing occurred just within a plug-in in FF, namely: Firebug. Code seems to jump there too when I scrolled.

The issue as a whole: elements flicker while scrolling only in Firefox. flicker a little bit.

If anybody has a solution or has experienced something like this before, and knows how to fix it, please provide me the solution or show me a fix, I am not able to fix this, the reason I am unable to solve this issue is because I've written over 4000 lines of CSS for the past months

SeinopSys
  • 8,787
  • 10
  • 62
  • 110
John Smith
  • 465
  • 4
  • 15
  • 38
  • 3
    It would be handy to see an example of it. Can you make a [jsFiddle](http://jsfiddle.net/)? – NielsC Apr 19 '13 at 07:23
  • it would also be beneficial to have all code prior to this element too, as no doubt that will be the root of the issue. – seemly Apr 19 '13 at 07:36
  • **EDIT: Sorry, I had done some issues within that code, here's the one which reproduces the same issue i.e. text jumps on scroll:** http://jsfiddle.net/WL67y/7/ – John Smith Apr 19 '13 at 07:43
  • Added red border, if you make it small enough so that scroll appears on the right side, and you scroll down, you'll see the title parts jump a little bit, http://jsfiddle.net/WL67y/8/ – John Smith Apr 19 '13 at 07:46
  • is this what u want to do: http://jsfiddle.net/WL67y/10/ – AhmetEmre90 Apr 19 '13 at 07:49
  • I can't seem to reproduce it in the jsfiddle. Can you make a screenshot instead? – NielsC Apr 19 '13 at 07:49
  • I can't reproduce it in the jsfiddle either. Can I ask which browser you're using? – Vince Bowdren Apr 19 '13 at 07:56
  • I am not sure of what's causing this, my screen resolution is: 1680 x 1050 – John Smith Apr 19 '13 at 08:07
  • I am using Firefox (Latest version) – John Smith Apr 19 '13 at 08:08
  • Well I honestly have no idea what causes this problem. But the title shifts like 1 pixel. Is it that of a problem? Or does the shift increases when the page becomes longer? – NielsC Apr 19 '13 at 08:09
  • Well, 1 pixel yes, what about when you have many titles like comments on a blog, and every persons name moves on pixel when scrolling down, this feels and looks very annoying. There are 5 comments and if I scroll the names move one pixel, and it looks like 3D water text or something, but it's very annoying, and not sure of why it occurs. Any help would be appreciated, thanks! – John Smith Apr 19 '13 at 08:15
  • Read that page jumps can be caused when centering a div i.e. margin: 0 auto; if no scrolls appear on one page, and they suddenly appear on another. – John Smith Apr 19 '13 at 08:16
  • Is that page with those comments online where we can see it? – NielsC Apr 19 '13 at 08:21
  • It's in my computer, it's a blog I am developing! But the same thing occurs in the jsfiddle example I posted! Try copying all of the code in jsfiddle and make a new .html with inline CSS and force scroll on the page (I haven't done this, i.e. forced scroll) to make sure you can reproduce this in your machine. – John Smith Apr 19 '13 at 08:25
  • Even line-height: 0; causes 1px jump! – John Smith Apr 19 '13 at 08:27
  • Found something here about scrollbars: http://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right – John Smith Apr 19 '13 at 08:31
  • Some details here, http://css-tricks.com/one-pixel-shift-buttons/ – John Smith Apr 19 '13 at 08:33
  • See [fiddle](http://jsfiddle.net/anpsmn/WL67y/16/). I removed margin of h2. – anpsmn Apr 19 '13 at 08:36
  • Well, after performing a few more analysis, it seems like everything is moving one pixel, very weird. Can this have something to do with the page being naked, I am thinking of headers & footers? I do not have such on the page, I am only working on the body section. – John Smith Apr 19 '13 at 08:51
  • Did a few more analysis with Firebug, seems like is at the top, some content is outside the body and some inside, saw this after that I add border: 1px solid red; to the body in CSS. – John Smith Apr 19 '13 at 09:04
  • Well, *{ padding: 0; margin: 0; } this eliminates the jumps, but not sure if it is a good solution, can anybody confirm whether this is an accepted standard solution to this issue? Thanks! – John Smith Apr 19 '13 at 09:49
  • Well, seems like I have some hard work to do to solve this problem and eliminate this issue completely! Thanks anyway folks! Sorry for using up your time. Thanks again! – John Smith Apr 19 '13 at 10:00
  • Yes {padding: 0; margin: 0} is a good solution. I've seen the usage of that before but I didn't know it would fix this problem. – NielsC Apr 19 '13 at 11:05
  • NielsC no, this does not eliminate the issue, I am not sure why this problem occurs only in Firefox, tested Chrome, and there were no problems, IE didn't have problem either. Weird, not sure of why! hmm? – John Smith Apr 19 '13 at 16:38
  • When I open Firebug, it seems like the same thing happens there too, the CSS code (shown on the right side) jumps too when I scroll, very weird, not sure if this is a BUG in FF. – John Smith Apr 19 '13 at 16:44
  • Doesn't heppen for me on Google Chrome v26.0.1410.64. – SeinopSys Apr 19 '13 at 17:23
  • I don't know, what's wrong. but in my Ubuntu Machine text jumps on scrolling and the same code works fine on other machines, So I suggest if possible try to test on some other platform. – lazyprogrammer Apr 19 '13 at 17:26
  • @DJDavid98 this works on Chrome without any issues. – John Smith Apr 19 '13 at 18:54
  • @lazyprogrammer thanks for confirming that! It seems like the correct word is: **elements flicker while scrolling** only in Firefox – John Smith Apr 19 '13 at 18:56
  • Well, it's currently unable for me to find a solution, text jumps some elements move one pixel as the text, elements like: buttons, spans, divs. Not sure of what is causing it. Can alignment top vertical etc cause this, not sure! – John Smith Apr 19 '13 at 19:00
  • If anybody has a solution or has experienced something like this before, and knows how to fix it, please provide me the solution or show me a fix, I am not able to fix this, the reason I am unable to solve this issue is because I've written over 4000 lines of CSS for the past months. – John Smith Apr 19 '13 at 19:02
  • @lazyprogrammer: I have tested this on my iPad and it works perfectly fine there, I tested this on another MAC OSX machine it works fine there, and it works perfectly fine on IE9, Chrome, Safari and Opera, but on Firefox, Windows 7 SP1 the text jumps while scrolling or once reaching the end of scroll. – John Smith Apr 19 '13 at 19:08
  • Has anyone found a solution? I am still searching the web! – John Smith Apr 20 '13 at 15:49
  • Well, scrolling in a google search result page, shows text jumps too, so it does not seem like there are issues with my CSS HTML, but with firefox, in addition, I found this: http://support.mozilla.org/en-US/questions/751271 – John Smith Apr 20 '13 at 18:32
  • Has anyone experienced something similar? I know I have lot's of DIV tags, do they position and behave in a certain way? Maybe I am missing something, anyone? – John Smith Apr 20 '13 at 20:05
  • sorry! i couldn't realize the problem still. – Bhojendra Rauniyar Apr 23 '13 at 07:43
  • @C-Link: Didn't you read? – John Smith Apr 23 '13 at 11:23
  • @JohnSmith all I read but still couldn't understand. I see everything is fine in jsfiddle. – Bhojendra Rauniyar Apr 23 '13 at 12:23
  • Is it? When I scroll it gets messy! The text jumps one px! – John Smith Apr 23 '13 at 12:53

1 Answers1

1

You may have an issue with your unit that is used for the blue line. Check to be sure that is matches with the rest of your tags. (em, px, % etc)

Jpm61704
  • 60
  • 2
  • 8