Issue on Ie7 When Page Is Scrolling.Text Is Not Proper

Issue on IE7 when page is scrolling.Text is not proper

This sounds like a the IE7 Text Redraw bug:

http://zomigi.com/blog/ie-7-button-text-redraw-bug/

http://www.lifeathighroad.com/web-development/fixed-ie7-button-text-redraw-bug/

try adding this to the button css:

overflow: visible

If that doesn't work try this:

border: 1px solid transparent;

Ie7 Redraw bug when i am scrolling the page

I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7).

Please include more info or a reproducible example and I'd be happy to help.

EDIT:

It seems that when then mouse enters the page after scrolling, it redraws the button. Based on my browsing experience, it is hard to notice. I suggest to force it to redraw the button when it becomes visible.

This small jQuery method will handle that, although further optimizations can be made. Please test it and leave a comment if it needs adjustments.

$('#my-button').RedrawWhenVisible();

$.fn.RedrawWhenVisible = function()
{

    $(window).scroll(function() {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = this.offset().top;
        var elemBottom = elemTop + this.height();

        // If element is partially visible...
        if((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom)) {
            //Redraw it, just once.
            if(this.attr('data-redraw')) {                
                this.hide().show();
                // Prevent further draws.
                this.removeAttr('data-redraw');
            }
        } else {
            // The element is not visible...
            if(!this.attr('data-redraw')) {
                // Flag it to redaw on scroll.
                this.attr('data-redraw','redraw');
            }
        }
    }
}

EDIT 2:

Since the other button is fine, I bet it's a very specific CSS issue. Double check all of the attributes for those CSS classes, the grey button is fine so check how that button differs from the Orange/Yellow one.

IE7 Scrollbar doesn't work

I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:

#content_box  {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;

this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).

I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)

IE7 relative/absolute positioning bug with dynamically modified page content

This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.

The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.

#panel { position: relative; overflow: hidden; border: solid 1px black; } 

In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":

Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).

The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":

As of IE7, overflow became a layout-trigger.

Avoiding weird automatic scrolling in IE

Have you tried this?

<body style="height:1000px;" ...

While you didn't post the version of IE which was showing the problem, on my machine (IE8) giving the <BODY> a tall height clears up the scroll-back-to-top problem that happens when you scroll (with the keyboard) while the popup menus are displayed.

The script does not work properly in the browser Internet Explorer. How to fix?

You can't rely on scroll firing smoothly in old browsers or when using jQuery.

The problem is that the event that fires on scroll is allowed to cancel it, so the browser has to complete the event script before appearing to scroll the page - if this takes too long the scroll appears to stutter or hang.

In your script you're calling jQuery methods like .width() and .outerHeight() and these wrap underlying methods that wait for a DOM reflow. They're slow, not incredibly slow, but slow enough that a scroll animation can appear to drop frames or stutter waiting for them. You also change positioning, which also causes a reflow.

Modern browsers have a new feature to handle this: passive event listeners - as passive listeners can't cancel the event the browser doesn't have to worry about waiting for them. jQuery still doesn't support them, so it's recommended not to use jQuery for scroll events at all.

However none of those are available to IE - IE's solution to this problem was to debounce the event slightly. Multiple scrolls in quick succession would be stacked and only periodically fired, and DOM reflow changes can cause it to fire partly before and partly after. You don't really notice if you drag the slider but scrolling with the wheel appears to jerk when it catches up.

I'd try the following:

• Move all the size checks that don't change between scroll events outside the scroll.

• Change the positioning to be done with CSS transform: translate as this uses the graphics card to do the calculations.

---

Related Topics