Search code examples
cssgoogle-chromewebkit

Chrome(webkit) gradient percentage bug

BUG! Left here in hope that it will attract attention and perhaps a fix.

The problem is that chrome, makes(i have checked!) the first half of the gradient smaller than the second one. My code is:

background: linear-gradient(to left, #ffffff 50%, #f5f5f5 50%) fixed;

Also tried:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3236), color-stop(50%,#ff3236), color-stop(50%,#000000), color-stop(100%,#000000));
background: linear-gradient(to left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 50%,#ffffff 100%);

Edit/Update: It is indeed a bug - updates are for clarity (top 2 blocks are divs, each 50% width, of screen - bottom is split with gradient): 1) Visual representation of the bug: enter image description here

2) Thanx to @elstgav for a putting up the a Codepen Test

Solution

  • As of now (2016-11-02), This issue ssems to be fixed, I just tested these pens :

    http://codepen.io/elstgav/pen/guotz

    http://codepen.io/gliesche/pen/GoWMVO

    in Chrome Version 54.0.2840.71 m, and they all work.

    However, Chrome still seems to have some issues with scaling gradient backgrounds when they are repeated:

    SO link: Chrome not updateing background-size gradient properly on resize

    Chrome BT: https://bugs.chromium.org/p/chromium/issues/detail?id=604875