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.
Created attachment 71661 [details] Bug screenshot
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.
(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.
Are you using the mobile theme on your desktop? Or that could be the reason
(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.
Now that is really strange... seems that you need to debug more and find out what makes the difference!
Created attachment 72066 [details] Facebook button computed style on desktop
Created attachment 72067 [details] Facebook button computed style on N900
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.
(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
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.
(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 ... :)
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?
Created attachment 73651 [details] Screenshot
(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?
(In reply to comment #13) > Kling, do you think it is ok? Any performance issue? Looks harmless to me :)
(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.
Created attachment 73734 [details] Luiz's patch on N900
(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 :)
(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.
Comment on attachment 73649 [details] patch Clearing flags on attachment: 73649 Committed r71920: <http://trac.webkit.org/changeset/71920>
All reviewed patches have been landed. Closing bug.
Revision r71920 cherry-picked into qtwebkit-2.1 with commit 1453361 <http://gitorious.org/webkit/qtwebkit/commit/1453361>