0

Here's what've at the moment http://jsfiddle.net/hmr4ca73/

<ul class="parts">
    <li class="part part__1 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/300);">
                <span>text 1</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__2 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/301);">
                <span>text 2</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__3 part__right">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/302);">
                <span>text 3</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__4 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/303);">
                <span>text 4</span>
            </div>
        </div>
        </div>
    </li>
</ul>

1) there're 4 divs, each is 25% width of the parent

2) these divs are responsive for both height and width

3) when users hovers on one of the divs, it's width changes to 34%, others to 22%

4) image inside each div fills 100% width and 100% height of the parent using background-size: cover

The issue is "cluttered edges" http://grab.by/BibW

Is it possible to fix using only CSS?

Any help is appreciated.

Transfers of this code to SVG or Canvas is double appreciated.

Shaels
  • 79
  • 1
  • 8

1 Answers1

2

This is a known issue with Webkit engine.

A trick is to use backface-visibility:

.part_shape {
    -webkit-backface-visibility: hidden;
}

Sidenote:
I use this trick without knowing why it works. I guess it force a 3d engine or something to be enabled, which makes smooth edges

zessx
  • 68,042
  • 28
  • 135
  • 158