Floating elements are rendered inaccurate in Webkit browsers

Introduction

I created a grid using floating li-elements, mainly for design and click-handling reasons.

When I positioned another element over this grid using position:absolute, I noticed that the floating li-elements are not rendered correctly/miscalculated. In fact, these elements are a little bit smaller as they should be. It also looks like the y-Axis is much more inaccurate than the x-Axis.

I also tried to use % instead of vw but that doesn't help.

I think this is a bug in Webkit. Is there any workaround?

Example (Test in Safari/Chrome OSX)

Hover tiles next to the absolute positioned element to see the miscalculation.

HTML
<ul>
    <!-- 10 -->
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>

    <!-- Repeat a few times ... -->

    <li class="absolute"></li>
</ul>
SCSS
* {margin:0;padding:0;border:0;}

ul {
    list-style:none;
    width:100vw;

    li {
        float:left;
        width:10vw;
        height:10vw;
        background-color:#CCC;

        &:hover {
             background-color:#AAA;
        }
    }

    .absolute {
        position:absolute;
        top:50vw;
        left:50vw;
        background-color:#DDD;
    }
}

Screenshot

JSFiddle

Test in Safari: jsfiddle

Answers


Yeah, I have observed the same issue in Chrome but not in Firefox. Why don't you reach to the li element you want with :nth-child(n) pseudo class? Especially when you need the element for click and hover events. find a working example here


I just changed the styling and it works fine:

* {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
    list-style: none;
    width: 100%;
}
li {
    float: left;
    width: 10%;
    height: 10vw;
    background-color: #CCC;
}
li:hover {
    background-color: #AAA;
}
.absolute {
    position: absolute;
    top: 50vw;
    left: 50vw;
    background-color: #DDD;
}

Need Your Help

S3 Redirect base domain to key prefix folder

redirect amazon-web-services amazon-s3

I'm using an S3 bucket to host a static site mydomain.com. Originally the blog content layout was

Fatal error: Call to a member function setColumn() on a non-object in Magento

gridview magento-1.7 admin renderer

Fatal error: Call to a member function setColumn() on a non-object in D:\Program Files\wamp\www\magento\app\code\core\Mage\Adminhtml\Block\Widget\Grid\Column.php on line 291