Hello, It seems that CSS gradients (Great feature btw.) are not working correctly with percentage based background positions or the main positioning keywords (top, bottom, right etc). Given the following HTML/CSS, I think the ".bad" element is not being rendered correctly. I would expect it to look identical to the ".good" element. This is the only spec I could find on the subject: http://webkit.org/blog/175/introducing-css-gradients/ & it states that gradients should work in the same way as images. There are two rendering issues here (possibly related..): 1) The gradient part of the background should be positioned at the bottom of the element. 2) Even though the gradient remains at the top of the element, the predominant background color of the element should still be the darker gray (65) due to the use of background-size & background-repeat. Can somebody please take look & confirm for me? Confirmed in 530.17. Thanks in advance Chris <html><head><title>Background position & CSS gradient bug demo.</title></head><body> <style> .demo { width: 300px; height: 300px; margin: 100px auto; } .bad { background-image: -webkit-gradient(linear, 0 0, 0 25, from(rgb(65, 65, 65)), to(rgb(225, 225, 225))); background-position: center 100%; background-color: rgb(65, 65, 65); background-size: 25px 25px; background-repeat: repeat-x; } .good { background-image: -webkit-gradient(linear, 0 0, 0 25, from(rgb(65, 65, 65)), to(rgb(225, 225, 225))); background-position: center 275px; background-color: rgb(65, 65, 65); background-size: 25px 25px; background-repeat: repeat-x; } </style> <div class="demo bad "> </div> <div class="demo good "> </div> </body></html>
Created attachment 32714 [details] html of described behaviour Adding test case as an html document.
Looks like this has been fixed? I can't see any difference in Chrome Canary 16.0.901 on Mac OS X (reporter was on Vista)
I am unable to reproduce this bug in Safari 15.5 on macOS 12.4 and it matches other browsers Chrome Canary 104 and Firefox Nightly 103. From Comment 01, the described behavior of test case to expect gradient to be "bottom" of box is working as intended on test case and both boxes have "darker grey" color as well. I think it got fixed down the line and it can be marked as "RESOLVED CONFIGURATION CHANGED". Thanks!