Description
Internet Explorer has what is called the Peek-a-Boo bug where under certain situations content is hidden until the mouse passes over the link or I.E. window is resized.
Steps to reproduce
As far as I know this impacts right side bar theme.
Example
I tried to reproduce on MoinMoin wiki, but it doesn't want to cooperate. I thought is was triggered by small pages with only links and headings.
Details
MoinMoin Version |
1.5 |
OS and Version |
|
Python Version |
|
Server Setup |
|
Server Details |
|
Workaround
Edit CSS. I tried to find the place, but it became rapidly obvious that I didn't know what I was doing. At least I can learn enough to be dangerous...Add the following to the end of 'screen.css' of the 'rightsidebar' theme...
* html div#page, div#header {height: 1%;}This says to set all 'div's with an id of 'page' or 'header' to have a height = 1%. Because 1% is too small to contain any content, IE6 recalculates a real height based on the content.
Could one of the IE admin/users please check if it is the appearance of height in the css definition and the value of 1% or does it work too if it is 0.01%? -- ReimarBauer 2006-01-13 09:53:48
1% and 0.01% both works well and the display is identical. This solution solves this Peek-a-Boo bug and MoinMoinBugs/PreformatedTextEatsInIE6 bug that I encountered. I suggest to apply this fix to next release. -- RuxLi 2006-01-14 03:48:25
I think IE will need height. I should have asked clearer about what I wanted for the values. I like to know the lowest possible value but it needs tested before it will be changed (probably there is a limit). Could you try please again 0.00001% or other values below 0.01%. If this gives the same good working result it does not matter to add this extension of height size to all elements. Be sure to have your browser cache purged. Thanx -- ReimarBauer 2006-01-14 11:32:33
I have tested the following value: 1%, 0.01%, 0.0001%, 0.00000001%. All of them work well and the displays are the same. I removed the sulution to make sure the problem is there before each test, and then applied the solution to make sure it works. -- RuxLi 2006-01-16 01:31:36
The same change, to the "modern" theme, seems to fix MoinMoinBugs/MoreIeRenderingIssues as well as this one. (Of course, I've yet to manage to get a 100% reproducible case, so I can't be completely sure - but since I've applied the change I haven't been able to provoke the issue...)
Discussion
The bug is also a problem in the 'modern' theme, e.g. when you create a new page. In this case the sentence 'Diese Seite gibt es noch nicht...' is not visisible. The workaround which is described in the chapter above is doing fine here as well. It seems that the 'classic' theme has no problems of this kind.
In classic we have defined height in #pagetrail. Only one height at the right place seems to be needed (if it's the right one)
Please explain shortly why this works and why it doesn't have negative consequences.
As I understand it, the error is caused by rendering bugs related to positioning of floating elements in IE. The links above discuss it further. The bug is triggered by elements without a defined height. From the Plone page referenced above:
- What this rule does is to apply a very small height to the element, forcing Internet Explorer into something called "layout mode". The reason for the disappearing text problem is that IE caches the size of elements erroneously when handling floating elements, and setting a very small height forces Internet Explorer to re-calculate the height - thus making the text appear again.
The fix should not affect non-IE browsers, as the "* html" incantation hides the CSS from non-IE/Win browsers. The fix won't adversely affect IE, as the height is so small that it is always smaller than the actual box content, and the box expands to fit its content.
Hope this helps. I have implemented this on our internal Wiki, with no adverse effects (all clients use IE6) and I don't get the rendering problems at all. -- PaulMoore 2006-01-16 17:51:57
I am able to test this tommorrow on some of our wikis with non IE browsers and probably with the forbidden IE. I think I will add a very small amount of 0.00000001% (hmm, let's see if 0% works too or if it needs a positive small value). -- ReimarBauer 2006-01-16 21:13:28
We are using not regular IE for browsing. The simple tests I did for now do not show any problems by adding the height with 0% at the end to screen.css of modern and rightsidebar theme. browsers like mozilla and konqueror did not show a problem till now. lets test a bit more. -- ReimarBauer 2006-01-17 14:14:26
* html div#page, div#header {height: 0%;}
- Testcases
Visit all pages mentioned above and look at the dialog of a new page creation and look how it is shown with IE for each theme of classic, modern, rightsidebar
- classic
works with IE6 -- ReimarBauer 2006-01-20 16:27:00
- modern
works with IE6 -- ReimarBauer 2006-01-20 16:30:59
- rightsidebar
works with IE6 but some pages look sometimes like this one
. the page is below the sidebar. Other pages are shown normal.-- ReimarBauer 2006-01-20 16:43:50 The page imaged below the sidebar might be a different problem. IE6 here had the same issue with 1.3.x that I pretty much took as an IE idiocy and ignored since the content was actually there and it only happend on a couple pages. The Peek-a-boo bug only became evident (at least to me) with 1.5.0. -- TimCera 2006-01-24 14:29:47
Still a Bug with IE7 and rightsidebar Theme
Just upgraded to Moin 1.7.1 and still have this bug, now with IE7! Seems to only affect the rightsidebar theme. With IE7 I could not see the user 'Settings' page. You can reproduce on http://moinmo.in site by using the rightsidebar theme and going to the 'Settings' page. Found a fix on this site http://www.zeldman.com/2006/10/27/ie7fixes1/ about halfway down the page. I choose the fix to include 'min-height: 1%;' in the '#page' section of the rightsidebar 'screen.css'. Works now! -- TimCera 2008-07-30 12:31:38
Tim, could you please do that "fix" within msie.css of all themes needing it, test it (maybe also with IE6) and provide a diff? There are still some days left until 1.7.2, so it still could get in. -- ThomasWaldmann 2008-08-31 21:22:43
Not much (just three lines added to msie.css in the rightsidebar theme), but here is a moin-peek-a-boo-fix-1.7.1.patch. -- TimCera 2008-09-03 14:56:27
Plan
- Priority:
Assigned to: ThomasWaldmann
- Status:
- fixed in 1.5.1 release (except rightsidebar)
rightsidebar theme fixed by http://hg.moinmo.in/moin/1.7/rev/38e9b3922748