[ 
https://issues.apache.org/jira/browse/JSPWIKI-703?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13108040#comment-13108040
 ] 

brushed commented on JSPWIKI-703:
---------------------------------



The problem is related to a rendering bug in IE9 when treating a :hover inside 
a floated element, with the overflow selector set to 'auto'.

We use overflow in JSPWiki to automatically generate horizontal scrollbars when 
the page content is to wide to fit the screen;  vertical overflow is always 
shown by extending the page downwards.

Apparently, IE9 has a unexpected side-effect on :hover. 
This is eg used on all the headers to display the section edit link or the hash 
link.  

In such a case, IE9 changes the page width or height, every time you hover over 
such a link. ( you can see how the size of the scrollbars change)   I couldn't 
find on google any reference to this IE9 bug.

It is easy to reproduce with this html snippet.  Simply hover your mouse over 
the :hover elements, and see the size of the floated div grow downwards !

{noformat}
<style type="text/css">
.view { margin:2em; width:50%; float:right; overflow:auto; border:2px solid 
lime; }
.hover:hover { background:yellow; }
</style>
 

<div class="view">
<p class="hover"><b>Hover me plse</b></p>
<p>some long text here to overflow the page width 
abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</p>
<img src="IE9_wideimg.bmp" alt="test" />
<p>some long text here to <span class="hover">o-v-e-r-f-l-o-w</span> the page 
width 
abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</p>
</div>
{noformat}


After some experimenting, I found that adding an inline container (eg a span 
element) to wrap all contents of the floated element, will stops IE9 to change 
the page width or height.

Here is the updated html snippet: 

{noformat}
<div class="view">
<span><!-- fake inline element, to workaround a IE9 render bug 
float+overflow/auto --!>
<p class="hover"><b>Hover me plse</b></p>
<p>some long text here to overflow the page width 
abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</p>
<img src="IE9_wideimg.bmp" alt="test" />
<p>some long text here to <span class="hover">o-v-e-r-f-l-o-w</span> the page 
width 
abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz</p>
</span>
</div>
{noformat}


For JSPWiki, we need to add a <span> element inside the <div 
class="pagecontent"> element. (and possible also on some other places)



dirk


> contents oversize page auto lessen (目录过大造成页面自动缩小)
> -------------------------------------------------
>
>                 Key: JSPWIKI-703
>                 URL: https://issues.apache.org/jira/browse/JSPWIKI-703
>             Project: JSPWiki
>          Issue Type: Bug
>          Components: Default template
>    Affects Versions: 2.8.5, 3.0
>         Environment: apache-tomcat-6.0.32;
> jdk1.6.0_26;
> browser:ie 9.0.8112.16421;
> JSPWiki v2.8.4;
> OS win7
>            Reporter: 卢海宁
>            Assignee: brushed
>            Priority: Minor
>
> My English is not my forte, i'm sorry give you the inconvenience of reading.
> bug问题主要的表现为建立过大目录后,在目录和正文之间做鼠标焦点的切换会使页面的宽度不断的减小。
> 但是,当页面的宽度减到最小之后,页面又会恢复正常。然后又可以继续减小,周而复始。
> 为了直观的体现Bug的现象,我已经将我的页面建立在http://www.jspwiki.org/上了。
> 具体的地址是:http://www.jspwiki.org/wiki/%E9%9B%BE%E5%86%89
> I am sorry for the inconveniences I caused you due to my English inadequacy. 
> The bug's main effects is when the table of contents is too large, switching 
> the mouse cursor between the table of contents and the main content will 
> cause the page width to constantly decrease. However, when the page width has 
> decreased to its minimum, the view will return to normal. It will then 
> decrease again, and continue the cycle.
> To show the bug, I have put my page on http://www.jspwiki.org. The specific 
> web address is http://www.jspwiki.org/wiki/%E9%9B%BE%E5%86%89.
> I discovered a problem. The bug will only show in the IE9 browser, and it's 
> only when compatibility view mode is not enabled!
> Thank you for w34p0nx's help me to translate this description!

--
This message is automatically generated by JIRA.
For more information on JIRA, see: http://www.atlassian.com/software/jira


Reply via email to