Forums
View unanswered posts | View active topics It is currently Thu Dec 14, 2017 12:08 am



Reply to topic  [ 1 post ] 
 IE8 (x64 only) "jumping" of page elements issue 
Author Message

Joined: Fri Apr 15, 2011 4:44 am
Posts: 1
Post IE8 (x64 only) "jumping" of page elements issue
While developing web interface for my company I faced up issue with random "jumping" of page elements.

To keep it simple, some text elements started to jump 1px up and down while moving mouse. Such behavior can be seen ONLY in 64bit version of IE8 (tested xp and win 7).
After long investigation I disabled PIE behavior and problem disappeared. I did not wanted to get rid of PIE so I digested more into PIE implementation. I found a section where various units ('em','pt') are measured. And then I realized that I used 'em' unit in one CSS rule:
Code:
body,table,input,textarea,select {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    color: #6b6b6b;
    line-height: 1.2em;
}


After removing line-height attribute problem disappeared.

This issue may be connected with some floating point operations handled differently in 64bit version (for font-size 11px, 1.2em is 13.2px).
This can be seen on picture below - every fifth element jumps (0.2px * 5 gives 1 missing pixel).

Hope this will help someone or it will be easier to fix it.

Attachment:
File comment: Picture showing "jumping" issue
ie8x64bug.png [22.79 KiB]
Downloaded 111 times


Here is sample code (w3c validated) which can be used to reproduce this issue. It is not the same as in my main product. There jumping never stopped. Here it jumps once up and once down while moving mouse according to path visible on picture.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <meta content="IE=EmulateIE8" http-equiv="X-UA-Compatible" />
    <style type="text/css">
        body,table,input,textarea,select {
            font-family: Tahoma, Verdana, Arial, sans-serif;
            font-size: 11px;
            color: #6b6b6b;
            line-height: 1.2em;
        }
        
        
.ieCss3Fix {
            behavior: url(pie.htc);
        }
        
        
.color_bg {
            height: 50px;
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(78, 78, 78) ), color-stop(1, rgb(36, 36, 36) ) );
            background-image: -moz-linear-gradient(center bottom, rgb(78, 78, 78) 0%,rgb(36, 36, 36) 100% );
            background-image: linear-gradient(left, #242424, #4e4e4e);
            -pie-background: linear-gradient(#242424, #4e4e4e);
        }
        
        a
.button {
            padding-top: 10px;
            text-decoration: none;
            display: block;
            width: 100px;
            height: 30px;
        }
        
        a
.button:hover {
            color: #ff0000;
        }
        
        
.wider {
            padding:0 20px;
            border-bottom:1px solid black;
        }
    </style>
    <title>IE8 x64 bug</title>
</
head>
<
body>
<
div class="color_bg ieCss3Fix"><!-- --></div>
<
a class="button" href="javascript:;">testlink</a>
<
table>
    <tr>
        <td>
        <p>Normal element</p>
        <p>Normal element</p>
        <p>Jumping element</p>
        <p>Normal element 1</p>
        <p>Normal element 2</p>
        <p>Normal element 3</p>
        <p>Normal element 4</p>
        <table><tr><td class="wider"><span>Jumping 5</span></td><td class="wider">this one also is jumping</td> </tr></table>
        <p>Normal element 1</p>
        <p>Normal element 2</p>
        <p>Normal element 3</p>
        <p>Normal element 4</p>
        <p>No longer jumping element 5</p>
        <p>Normal element 1</p>
        <p>Normal element 2</p>
        <p>Normal element 3</p>
        <p>Normal element 4</p>
        <p>No longer jumping element 5</p>
        </td>
    </tr>
</
table>
</
body>
</
html>
 


Fri Apr 15, 2011 7:11 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Majestic-12 [Bot], Steeler [Crawler] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.