Black rectangles around all UI elements

[paulprovost]

Hello,

Just built luakit from git. Everything works fine, except that all UI elements (text fields, buttons, checkboxes, etc.) are framed by thick black outlines. What have I done wrong?

Thanks!

Paul

[Plaque-fcc]

You may provide a sample screen capture and some info about the window manager, lua and libwebkitgtk versions you are using.
You may also try another GTK+ theme to see if it changes the look that's disturbing you.

Of course, if you find a solution the post you leave here describing the way will be appreciated.
Or if you don't find the way you can describe what you tried.

[paulprovost]

Hi,

I'm running a plain lubuntu install, with the LXDE desktop environment and OpenBox as a window manager. A screen capture showing the can be found here. As far as versions when building, I have lua 5.1. Here's what dpkg says about libwebkitgtk:

ii  libwebkitgtk-1.0-0                     1.8.0-0ubuntu2                          Web content engine library for GTK+
ii  libwebkitgtk-1.0-common                1.8.0-0ubuntu2                          Web content engine library for GTK+ - data files
ii  libwebkitgtk-3.0-0                     1.8.0-0ubuntu2                          Web content engine library for GTK+
ii  libwebkitgtk-3.0-common                1.8.0-0ubuntu2                          Web content engine library for GTK+ - data files
ii  libwebkitgtk-3.0-dev                   1.8.0-0ubuntu2                          Web content engine library for GTK+ - Development files
ii  libwebkitgtk-dev                       1.8.0-0ubuntu2                          Web content engine library for GTK+ - Development files

Thanks!

Paul

[Plaque-fcc]

Lxde, AFAIK, utilizes GTK2+, correct? I'd suggest you to play around GTK2+ themes with lxappearance a bit more and see whatchanges.

[paulprovost]

Playing with themes in lxappearance changes the widgets and the color of the text field, but the black boxes remain. Is there anything in themes.lua that could cause this?

[Plaque-fcc]

Gonna lurk more on theme.lua and reply back.

[Plaque-fcc]

Well, try the transparency hint described in FAQ at Wiki.

[paulprovost]

So I added

webview.init_funcs.set_win_trans = function (view, w)
    view.transparent = true
end

to rc.lua, but no change.

[Plaque-fcc]

Well… Can you try different WMs?

On Unity or Awesome I've never had a trouble. Using Lua 5.1, WebKitGTK 1.8 and 1.6, appropriately.

[Plaque-fcc]

On one of my machines UI look glitches when its GPU hangs (or something like that happens with the old crappy hardware). As for your trouble I even got no adequate idea, you know.

[ymln]

This issue was discussed here on Arch Linux forums: https://bbs.archlinux.org/viewtopic.php?pid=1112352#p1112352, but it seems it wasn't fixed completely. At least something you can start with.

[Plaque-fcc]

https://bbs.archlinux.org/viewtopic.php?pid=1113953#p1113953:

1. minor lag. when i load a page, loading pauses at 10% for a moment and then resumes. does anyone else have this problem?

— I've never thought this was a problem… I see this every day for nearly a year across several versions of both core luakit and webkit itself. Each time the navigation request does is not getting canceled it starts from 10% value; otherwise it freezes at 0%.

[paulprovost]

This appears to be a WebKit issue. It looks like the guys from Midori fixed it here:

http://permalink.gmane.org/gmane.comp.desktop.xfce.commits/39067

Unfortunately, I don't know the luakit code well enough to attempt this fix. Can anybody help?

[Plaque-fcc]

As I guessed (and so then read there), it is not a fix, just because
this is a workaround which still requires WebKit team to resolve the
issue; and, as I see, this relates generally to libwebkitgtk and not
mandatory to the WebKit core.

[ymln]

@paulprovost, try editing domain_props in your globals.lua like this:

domain_props = {
    ["all"] = {
        user_stylesheet_uri = "file://" .. luakit.data_dir .. "/styles/user.css",
    },
}

And create a file .local/share/luakit/styles/user.css with this content:

input[type='checkbox'] { -webkit-appearance: checkbox !important }
input[type='radio'] { -webkit-appearance: radio !important }
* { -webkit-appearance: none !important }

Hope that helps.

[Plaque-fcc]

Looks like a piece of that workaround ported, yeah?

[ymln]

Well, yeah. @paulprovost asked for help, and I helped.

[paulprovost]

@ymln: Thanks for that. It worked for the buttons and text fields, which makes things much more readable. Checkboxes and radio boxes still have the black border, though.

[ymln]

Did you try removing first two lines in user.css? Like this

* { -webkit-appearance: none !important }

[paulprovost]

Yah, that gets me no checkboxes or radio buttons at all.

[ymln]

I suggest you experiment with CSS to add some other styles to those checkboxes and radio buttons, maybe something like

input[type='checkbox'] { -webkit-appearance: checkbox !important; border: 1px solid }

You may try using Web Inspector too.
Sorry, can't help you further as can't reproduce it with my theme.

[Plaque-fcc]

Maybe you should apply the rest of the workaround style patch working
for Midori, no?

[herbertjones]

The workaround is merely hiding GTK elements(at least, that's what they appear to be), except for radio and checkboxes. This makes other elements either not show, or as in the case of dropdowns, no dropdown arrow is shown. Checkboxes and radio buttons still have the black border around them. I've tried other CSS, but as of yet have not found anything that will cause these widgets to paint correctly. For some reason, transparency isn't working on these GTK elements(assuming that's what they are).

[herbertjones]

Here is the webkit bug report:

https://bugs.webkit.org/show_bug.cgi?id=79680

[socksy]

Midori seems to have solved this issue, and luakit hasn't. One suspects it's because of the version of webkitgtk they're using — is luakit using an older version? Would be nice to switch over to luakit properly.

[Plaque-fcc]

I think this possible is, although it can take a lot of time before I dive deep into the it and do it all properly; nevertheless, if there is anyone who wants to help with this, I can add they to luakit-crowd team and grant access.

Currently I can't remember when I heard from Mason last time, and I actually have to finish other parts I haven't yet.

[Plaque-fcc]

BTW, I can't recall when and where I ran into those black rectangles. Hmmm.

[Plaque-fcc]

@socksy, now I had to reboot my PC and yet not started mate-settings-daemon (gnome-settings-daemon replacement), and I can see those crappy strange GTK2-vs-GTK3 elements. I am pretty sure they disappear just as they do when I start the daemon app, and you can try to reproduce the behaviour I mentioned.

[socksy]

Ok, so I no longer see the black boxes after the last update. I am not running mate (nor do I wish to install it for a single application, using xmonad) so that can't have been it. Curious. Have they disappeared for everyone else?

[residentsummer]

I was struggling with this issue for some time (on recent luakit and webkitgtk). Found a hint somewhere on the net about missing "composite" extension in Xorg causing this. I've finally managed to recompile Xquartz with this extension and black frames/borders are gone.

Hooray!

[aidanholm]

Closing due to inactivity