Opened 8 years ago

Closed 6 years ago

#7407 closed bug (fixed)

Black rectangle rendering bug with CSS3 box-shadow

Reported by: Giova84 Owned by: pulkomandy
Priority: high Milestone: R1
Component: Applications/WebPositive Version: R1/Development
Keywords: webpositive black rectangle box shadow css Cc:
Blocked By: Blocking: #7781, #9728, #10107
Has a Patch: no Platform: x86

Description

As you can see in the screenshot, Webpositive doesn't show correctly the translated text. is covered up with black colour. To be showed must be selected with mouse. You can reproduce this directly on http://translate.google.com

Attachments (2)

Google Translate.png (47.7 KB) - added by Giova84 8 years ago.
simplified.html (124 bytes) - added by mmlr 8 years ago.
simplified testcase to trigger "black shadow"

Download all attachments as: .zip

Change History (17)

Changed 8 years ago by Giova84

Attachment: Google Translate.png added

comment:1 Changed 8 years ago by anevilyak

This is most likely broken CSS handling in the webkit revision Web+ is currently based on, similar issues can be seen on other sites (i.e. on ArsTechnica, asking to switch to the black theme theoretically results in switching what CSS is used to render the page, but has no effect on Web+). Fixing this would require updating to a newer webkit, which is somewhat non-trivial at the moment.

comment:2 Changed 8 years ago by Giova84

Hi anevilyak. Thanks for the explanation!

comment:3 Changed 8 years ago by mmlr

Looks more like the problem with some of the native controls and bitmaps, where a black "shadow" extends to the right of said control with exactly the same dimensions of the control itself. I tried to track that down once, but failed to find anything obvious. Probably this is an issue with some broken layout calculations that makes WebKit think the control is at a different place than it actually is and then it consequently doesn't render anything in that space. In any case I'm pretty sure this is a port problem and not CSS. Of course our WebKit port is in desperate need of an update still...

comment:4 Changed 8 years ago by mmlr

Attaching a very simplified testcase. It seems a combination of "background: transparent" and a "-webkit-box-shadow" trigger the behaviour.

Changed 8 years ago by mmlr

Attachment: simplified.html added

simplified testcase to trigger "black shadow"

comment:5 Changed 8 years ago by Giova84

During these months Google Translate is changed and now is correctly rendered inside WebPositive, but on certain websites i can still see wrong rendering.

comment:6 Changed 7 years ago by mmadia

Hi. Our WebKit port (and thus WebPositive) was updated in July. Could you retest this in a new nightly image and report back? http://www.haiku-files.org/haiku/development Thanks!

comment:7 in reply to:  6 Changed 7 years ago by Giova84

Replying to mmadia:

Hi. Our WebKit port (and thus WebPositive) was updated in July. Could you retest this in a new nightly image and report back? http://www.haiku-files.org/haiku/development Thanks!

Hi Matt, Google Translate is displayed better in the new version of Web+, but on the most of websites, despite the newer version of webkit, WebPositive still shows drawing issues.

hrev44384

comment:8 Changed 7 years ago by aldeck

Keywords: rectangle box shadow css added; google translate covered text removed
Priority: normalhigh
Summary: Webpositive doesn't show correctly the translated text of Google TranslateBlack rectangle rendering bug with CSS3 box-shadow

comment:9 Changed 7 years ago by aldeck

Blocking: 7781 added

(In #7781) Yes, that's more or less what i was saying in my comment, though this ticket is full of unrelated attachments and comments. I'd like to track the css shadow issue in a single ticket, see #7407.

comment:10 Changed 6 years ago by Giova84

Currently, Webpositive is able to render correctly Google Translate.

comment:11 Changed 6 years ago by anevilyak

Blocking: 9728 added

(In #9728) The box-shadow issue problems are already tracked in ticket #7407.

comment:12 Changed 6 years ago by anevilyak

Blocking: 10107 added

(In #10107) In fact, looks like a duplicate of #7407.

comment:13 Changed 6 years ago by dsjonny

Still not working when using WebPositive/1.2.

comment:14 Changed 6 years ago by pulkomandy

Owner: changed from leavengood to pulkomandy
Status: newassigned

comment:15 Changed 6 years ago by pulkomandy

Resolution: fixed
Status: assignedclosed

Fixed in https://github.com/haiku/webkit/commit/b0c5e581f96b7bc6166c684b18d6dd2f9e98f3e0 . We still need to actually draw the shadow, however.

Note: See TracTickets for help on using tickets.