The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 Columns & Absolute Positioned Elements on Webkit Browsers

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #45670

    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:

    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?


    I figured out what was the culprit: adding a border-radius to the li element somehow causes a rendering issue with absolute-positioned elements. Very strange, indeed.


    I am experience the same symptoms, but I don’t have border-radius applied to the child or any of its parents.

    This is a very weird bug!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.