Bug 184798 – overridden CSS rule for background-size changes button rendering from platform (GTK) to HTML

• Component: Layout and Rendering
• Status: NEW

Created attachment 338372 [details]
page demonstrating inability to override CSS rules

In cases where buttons have not been "significantly" (my term) styled by web pages, WebKit will render them with platform-native appearance.

This has some relationship to the `-webkit-appearance` CSS property; for example, setting "-webkit-appearance: none;" disables it and renders such elements as plain colored rectangles.

Another property which affects the decision to render elements with platform-native appearance is `background-size`. Setting "background-size: 110%;" similarly causes non-platform-native rendering.

However, adding another CSS rule which overrides this first rule (as verified in the web inspector) does *not* restore platform-native appearance.

There seems to be no way to reset an element to platform-native rendering, even by setting the `appearance` or `-webkit-appearance` properties. This is a problem from an accessibility perspective, where user stylesheets may want to enforce native rendering for button elements where web pages set background-size.

The attached web page demonstrates the strange behavior observed here, which seems to contradict the notions of cascading/inheritance in CSS.

This is also the case for other native-themed elements, and likely for other CSS properties, but I don't have a good way to investigate exhaustively. I've observed this bug in WebKitGTK+ 2.4.11 with the WebKit2 API but this behavior is not new, reaching back at least to before the Webkit1 deprecation.