PKP Bugzilla – Full Text Bug Listing
|Summary:||JQuery fadeIn / fadeOut IE8 filter problem|
|Product:||OMP||Reporter:||Alec Smecher <alec>|
|Component:||User Interface||Assignee:||beghelli <bruno.beghelli>|
|Version Reported In:||Also Affects:|
Description Alec Smecher 2013-05-29 09:34:23 PDT
See http://pkp.sfu.ca/support/forum/viewtopic.php?f=40&t=10055 for details.
Comment 1 beghelli 2013-06-24 16:23:59 PDT
That's not related with roundabout, as pointed out in the topic discussion. It's just a problem with css. We group both side bars inside a div, the sideBarContainer. In IE8, intead of not following the height of it's inner content, this div is pushing the main content to the bottom because it's following the left side bar height (not sure why). I tried a little with IE8 on windows 7 but I had some problems with the developer tool (changing styles were not resulting in visual changes, freezing, etc). I will use a virtual machine to better test this, downloading now a disc image of xp with IE8 from microsoft's site and will try fix this as soon as it finishes the download.
Comment 2 Alec Smecher 2013-06-24 16:29:08 PDT
Comment 3 beghelli 2013-07-08 22:18:47 PDT
For some unknown reason, the css filter style that jquery applies to animate the fade in effect (the div container is controlled by the UrlInDivHandler and it uses fade in to show the element after loading is finished) is making the sideBarContainer div to follow it's inner divs height, only in IE8. I've managed to reproduce the error in a very simple html and css, but couldn't get any solution with css. Even removing the filter style definition after the page is rendered (via js) doesn't fix the problem. Found some reports for issues very similar to this one: http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/ms-filter-opacity-and-float.html http://labs.thesedays.com/blog/2011/06/02/ie-alpha-overflow-hidden-bug/ Maybe we can test the browser version and, if it's IE8, we avoid the fade in effect? Not so sure what to do.
Comment 4 Alec Smecher 2013-07-09 09:49:34 PDT
Bruno, try posting your reproduce code on Stackoverflow.com and see if you get anything there. If not, your work-around sounds fine to me; just make sure you reference this bug # in the work-around code.
Comment 5 beghelli 2013-12-09 14:19:16 PST
The solution when it's only html and css is to use filter: inherit, then the container div will not follow it's children height. But using jQuery function to fadeIn is making this solution to not work. As said previously, even removing the filter style after applying the fadeIn effect doesn't work. Will test if it's IE8 and avoid fadeIn until we have a better solution.
Comment 6 beghelli 2013-12-09 14:23:01 PST
Introduced workround to avoid breaking content structure styling https://github.com/pkp/pkp-lib/commit/d21767e62ad8028a4f7553502f1bc568acb638b3