Bug 48198 – [Qt] Button's background style from default Qt Mobile Theme is overriding facebook's button style

• Component: WebKit Qt
• Status: RESOLVED FIXED

[Ragner Magalhaes]

Facebook uses "background-color" property to define button's background color
and "color" property to define foreground color.

Qt Mobile Theme uses "background-image" property to define the button's
background color because "background-color" property doesn't support gradient,
and "color" property to define the foreground color.

So what is happening ...

"background-image" property from Qt Mobile Theme  is overriding "background-color" property from Facebook.

So we can see on the facebook page the gradient defined by
"background-image" property on themeQtMobile.css file.

As the facebook is using the "color" property like Qt Mobile Theme, it is overriding
the foreground color defined by Qt Mobile Theme on themeQtMobile.css file.



(QtMobileTheme's "background-image: gradient") + (facebook's "background-color:blue")  => gradient background

(QtMobileTheme's "color: gray") + (facebook's "color: white") => white foreground

As a result we can see facebook button with gradient background and white foreground.



= So how we could solve this:

We could use "!important" property on button's styles defined into
themeQtMobile.css file
but Qt mobile style will override the web page's styles.

But I don't think this is a good workaround.

=

The right thing would be if the background-color supported gradient
so we could use it to define the gradient for Qt mobile style. But this is not possible yet.

[Ragner Magalhaes]

Created attachment 71661 [details]
Bug screenshot

[Kenneth Rohde Christiansen]

If the page button is styled (like has a background) we shouldn't try to use our style at all, I guess. Our style is a fallback style. Maybe it is a bug in RenderThemeQt or similar.

[Ragner Magalhaes]

(In reply to comment #2)
> If the page button is styled (like has a background) we shouldn't try to use our style at all, I guess. Our style is a fallback style. Maybe it is a bug in RenderThemeQt or similar.

This bug is happening just on my N900.
QtTestBrowser is working well on my desktop.

I am compiling the WebKit for N900 using Qt version 4.6.2 from NokiaQtSDKv1.0.1
and for my desktop I am using Qt version 4.7.0 from Git.

[Kenneth Rohde Christiansen]

Are you using the mobile theme on your desktop? Or that could be the reason

[Ragner Magalhaes]

(In reply to comment #4)
> Are you using the mobile theme on your desktop? Or that could be the reason

Yes, I am using the mobile theme on my desktop and facebook button works well.

[Kenneth Rohde Christiansen]

Now that is really strange... seems that you need to debug more and find out what makes the difference!

[Ragner Magalhaes]

Created attachment 72066 [details]
Facebook button computed style on desktop

[Ragner Magalhaes]

Created attachment 72067 [details]
Facebook button computed style on N900

[Ragner Magalhaes]

I think I was right on my first comment.

Now I know why facebook's button works on desktop and not on N900.
Facebook uses different styles for desktop and mobile. I should know about this :P.

themeQtMobile.css  is really a fallback style, but for each property.
So, how we are using background-image and facebook uses background-color
the browser is computing our background-image and facebook's backgroun-color.
This is what is happening on N900.

Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72067
you can see our "background: -webkit-gradient" being computed.

but on desktop, facebook defines background-image property as "none",
than its button works with background-color property perfectly.

Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72066
you can see that our "background: -webkit-gradient" is not computed.

[Ragner Magalhaes]

(In reply to comment #9)
> I think I was right on my first comment.
> 
> Now I know why facebook's button works on desktop and not on N900.
> Facebook uses different styles for desktop and mobile. I should know about this :P.
> 
> themeQtMobile.css  is really a fallback style, but for each property.
> So, how we are using background-image and facebook uses background-color
> the browser is computing our background-image and facebook's backgroun-color.
> This is what is happening on N900.
> 
> Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72067
> you can see our "background: -webkit-gradient" being computed.
> 
> but on desktop, facebook defines background-image property as "none",
> than its button works with background-color property perfectly.
> 
> Look at https://bug-48198-attachments.webkit.org/attachment.cgi?id=72066
> you can see that our "background: -webkit-gradient" is not computed.

No more comment about this bug!?
I would like to fix it, but I don't know how to do yet

[Yi Shen]

Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?

<HTML>
<BODY>

<button style="background-color:#2277bb;" type="submit">Search</button>

</BODY></HTML>

I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.

[Ragner Magalhaes]

(In reply to comment #11)
> Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> 
> <HTML>
> <BODY>
> 
> <button style="background-color:#2277bb;" type="submit">Search</button>
> 
> </BODY></HTML>
> 
> I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.

Hi yi shen,
on my N900 I am getting a gradient(gray->white) button. I think it is working like on your S60.

I think it is the same issue.

Try this code:

<button style="background:#CCB666 url(http://www.blogblog.com/1kt/simple/gradients_light.png);" type="submit">Search</button>


if it works for you,
you are getting the same bug that me ... :)

[Luiz Agostini]

Created attachment 73649 [details]
patch

I did not make any tests in N900 nor with Facebook. Ragner, could you make those tests?

Kling, do you think it is ok? Any performance issue?

[Luiz Agostini]

Created attachment 73651 [details]
Screenshot

[Luiz Agostini]

(In reply to comment #11)
> Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> 
> <HTML>
> <BODY>
> 
> <button style="background-color:#2277bb;" type="submit">Search</button>
> 
> </BODY></HTML>
> 
> I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.

You can see this button in the last screenshot, it is the last button in the screenshot. Is it what was expected?

[Andreas Kling]

(In reply to comment #13)
> Kling, do you think it is ok? Any performance issue?

Looks harmless to me :)

[Yi Shen]

(In reply to comment #15)
> (In reply to comment #11)
> > Hi, Ragner, I saw a similar issue on S60, can you try following code on N900?
> > 
> > <HTML>
> > <BODY>
> > 
> > <button style="background-color:#2277bb;" type="submit">Search</button>
> > 
> > </BODY></HTML>
> > 
> > I am using qtwebkit 2.1, and on S60, I got a white button; on Linux, I got a button which has weired color (not #2277bb). In addition, the issue can't be reproduced by using webkit trunk's build on Linux.
> 
> You can see this button in the last screenshot, it is the last button in the screenshot. Is it what was expected?

The button on the screenshot looks good for me. So, in your changes, if a button defined background-color, then the "background: -webkit-gradient" will not be computed? Sorry, I can't test your patch now, but I will do it tomorrow morning.

[Ragner Magalhaes]

Created attachment 73734 [details]
Luiz's patch on N900

[Ragner Magalhaes]

(In reply to comment #18)
> Created an attachment (id=73734) [details]
> Luiz's patch on N900

It is working well on N900

Thanks Luiz,
good patch :)

[Luiz Agostini]

(In reply to comment #19)
> (In reply to comment #18)
> > Created an attachment (id=73734) [details] [details]
> > Luiz's patch on N900
> 
> It is working well on N900
> 
> Thanks Luiz,
> good patch :)

Good! Then if no one sees any problem I will commit it.

[WebKit Commit Bot]

Comment on attachment 73649 [details]
patch

Clearing flags on attachment: 73649

Committed r71920: <http://trac.webkit.org/changeset/71920>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Ademar Reis]

Revision r71920 cherry-picked into qtwebkit-2.1 with commit 1453361 <http://gitorious.org/webkit/qtwebkit/commit/1453361>