Has anyone ran into this rendering bug before? I’m using CSS3 columns to organize an unordered list of content. Some of these li elements contain a div that is absolutely positioned, and the li is set to position: relative as they should. The whole thing renders as expected in Firefox 21.0 in OS X, but when I view the page on Safari 6.0.5 and Chrome 27.0.* the following things happen:
1. There are 3 columns. Aside from the first column, where everything renders as expected, the absolutely positioned div do not show up for any li elements pushed into the second or third columns.
2. However (and this is where it gets interesting), the text that is contained within said div is actually selectable.
3. Once selected, the whole div will appear, until you refresh, and then it goes invisible again.
Here’s the test version of the website: http://dnnfy.com/v7/index-2.html
I’m not using any floats, and the hover functionality is not what’s causing it; I’ve removed the hover functions and the bug still persists.
It’s such a weird rendering bug and I can’t figure out what’s causing it. Any ideas?
