Opened 5 years ago

Last modified 16 months ago

#15475 reopened bug

css "background-clip: text" does not work

Reported by: cocobean Owned by: pulkomandy
Priority: normal Milestone: Unscheduled
Component: Kits/Web Kit Version: R1/Development
Keywords: Cc:
Blocked By: Blocking:
Platform: All

Description (last modified by cocobean)

Web+ does not display text within text overlay - only a black background of text overlay appears within web page. No issues with Otter Browser 1.0.02 and Safari 14.1.2.

Attachments (2)

blender-webpositive-1.3alpha-haiku_r1b3-cocobean.jpeg (323.6 KB ) - added by cocobean 3 years ago.
Text overlay web page issue (https://blender.org) - Web+ 1.3-alpha versus Otter Browser 1.0.02 on Haiku R1B3 x86_gcc2
testcase.html (187 bytes ) - added by madmax 3 years ago.
background-fill: text, with text-fill-color: transparent and a background to see through the text, of course. You should see red text in this sample file

Download all attachments as: .zip

Change History (21)

comment:1 by cocobean, 5 years ago

Description: modified (diff)

comment:2 by cocobean, 4 years ago

Tested on Haiku R1B3 hrev55181+56 x86_gcc2 w/ Web+ 1.2-alpha (HaikuWebkit 1.8.2-2, Webkit 612.1.21). Result: FAIL

Last edited 3 years ago by cocobean (previous) (diff)

comment:3 by nephele, 4 years ago

Component: Applications/WebPositiveKits/Web Kit
Summary: blender.org: Text overlay not workingwebkit: Text overlay not working on https://www.blender.org

comment:4 by cocobean, 3 years ago

Last edited 3 years ago by cocobean (previous) (diff)

comment:5 by cocobean, 3 years ago

Last edited 3 years ago by cocobean (previous) (diff)

comment:6 by cocobean, 3 years ago

Description: modified (diff)

by cocobean, 3 years ago

Text overlay web page issue (https://blender.org) - Web+ 1.3-alpha versus Otter Browser 1.0.02 on Haiku R1B3 x86_gcc2

comment:7 by cocobean, 3 years ago

Description: modified (diff)

comment:8 by nephele, 3 years ago

Maybe you could reduce this case to a simpler case? e.g take the site and strip it down till you have only the elements left that cause this problem

by madmax, 3 years ago

Attachment: testcase.html added

background-fill: text, with text-fill-color: transparent and a background to see through the text, of course. You should see red text in this sample file

comment:9 by cocobean, 3 years ago

The related code:

URL: https://www.blender.org/

<section class="page-header-main center"><div class="page-header-main-image frontpage"><img src="https://www.blender.org/wp-content/uploads/2021/05/blender_293_splash_erindale_s-e1620391412241.jpg?x88370" class="parallax"/></div><a href="https://www.blender.org/download/releases/2-93/" class="frontpage-header-link"><div class="container"><div class="page-header-main-title"><div class="title-head display-4"><span style="background-color: #081600" class="px-3 py-2 rounded"><span class="text-overlay">Blender 2.93.3 LTS</span></span></div><div class="title-subtitle lead mt-3"><span style="background-color: #081600" class="px-3 py-2 rounded"><span class="text-overlay">An incredible closure to a series 20 years in the making.</span></span></div></div></div></a></section>

comment:10 by cocobean, 3 years ago

Description: modified (diff)

comment:11 by cocobean, 3 years ago

Last edited 2 years ago by cocobean (previous) (diff)

comment:12 by pulkomandy, 3 years ago

Resolution: fixed
Status: newclosed

comment:13 by nephele, 3 years ago

Resolution: fixed
Status: closedreopened

Nothing was changed, this is still broken, only blender updated their site.

See for example http://web.archive.org/web/20200813051322/https://blender.org/

comment:14 by cocobean, 3 years ago

Last edited 2 years ago by cocobean (previous) (diff)

comment:15 by cocobean, 2 years ago

Tested on Haiku hrev56529 x64: haikuwebkit - 6e6c7e698f6f4dca715ff7ef539b944a19614f33 (Webkit 615.1.4): FAILED

Last edited 2 years ago by cocobean (previous) (diff)

comment:16 by cocobean, 2 years ago

Tested on Haiku hrev56595 x64: haikuwebkit 1.9.0-1 (Webkit 615.1.20): FAILED

NOTE: Epiphany 43.0 (WebKitGTK: 2.38.2): PASSED

Last edited 2 years ago by cocobean (previous) (diff)

comment:17 by pulkomandy, 16 months ago

Is there any place where this happens other than an old version of the Blender website? I don't think fixing bugs that happen only on an archived version of a website is very useful.

comment:18 by cocobean, 16 months ago

Test:

https://codepen.io/codeconvey/pen/rjOxON

Note: Standard HTML encoding for text overlay. Web page rendered text overlay correctly when using Epiphany/Web 43.1 on Haiku x86.

Last edited 16 months ago by cocobean (previous) (diff)

comment:19 by pulkomandy, 16 months ago

Keywords: webpositive removed
Summary: webkit: Text overlay not working on https://www.blender.orgcss "background-clip: text" does not work

An example that shows clearly what is happening:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Clipping the background to text does not seem to work.

Note: See TracTickets for help on using tickets.