Bug 75077 – [Qt] CSS - Rounded item with gradient background has grainy edges on MacOS

• Status: RESOLVED
• Resolution: INVALID
• Component: New Bugs

Created attachment 120298 [details]
HTML page to reproduce the issue

Overview: 

    If there is a CSS item in webpage which uses gradient background and is rounded, then the item's edge is grainy (if the background color is solid then the edge is smooth). If there is a border (min 2px) then it is not grainy (if the border is 1px then it is grainy).


Steps to Reproduce:

    Open the attached gradient-border-bug.html webpage with Qt Demo Browser (can be found from QTDIR/demos/browser) that is build with Qt 4.8.0 in MacOS.

Actual Results:

    The Edge of the middle circle is grainy. Please see the attached image's top right screenshot's the middle circle.


Expected Results:

    The edge should be smooth just like when using Windows/Linux. Please see the attached image's bottom right screenshot's the middle circle.


Build Date & Platform:

    QtWebKit 2.2 with Qt 4.8.0 on Mac OS 10.6.8


Additional Builds and Platforms:

    When using QtWebkit 2.2 (Qt 4.8.0) this can be reproduced only in Mac OS. This cannot be reproduced in Linux if using QtWebkit 2.2 but if using QtWebKit 2.0 (comes with Qt 4.7.4) then this can be reproduced.

Created attachment 120299 [details]
Screenshots of the webpage when using different QtWebKit versions and different OSs

[Max Desyatov]

also can be reproduced on Mac OS 10.7.* with Qt 4.7.* and Qt 4.8.*

The root cause of this issue is in the default graphicssystem, not in QtWebkit. This can be easily fixed by changing the default graphicssystem to 'raster'. You can change the graphicssystems by launching the Qt browser with a flag '-graphicssystem raster'.

You can see other ways to change the graphicssystem from:
http://developer.qt.nokia.com/doc/qt-4.8/qapplication.html#setGraphicsSystem