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 )
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)
Change History (21)
comment:1 by , 5 years ago
| Description: | modified (diff) |
|---|
comment:3 by , 4 years ago
| Component: | Applications/WebPositive → Kits/Web Kit |
|---|---|
| Summary: | blender.org: Text overlay not working → webkit: Text overlay not working on https://www.blender.org |
comment:6 by , 3 years ago
| Description: | modified (diff) |
|---|
by , 3 years ago
| Attachment: | blender-webpositive-1.3alpha-haiku_r1b3-cocobean.jpeg added |
|---|
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 , 3 years ago
| Description: | modified (diff) |
|---|
comment:8 by , 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 , 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 , 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 , 3 years ago
| Description: | modified (diff) |
|---|
comment:12 by , 3 years ago
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
comment:13 by , 3 years ago
| Resolution: | fixed |
|---|---|
| Status: | closed → reopened |
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:15 by , 2 years ago
Tested on Haiku hrev56529 x64: haikuwebkit - 6e6c7e698f6f4dca715ff7ef539b944a19614f33 (Webkit 615.1.4): FAILED
comment:16 by , 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
comment:17 by , 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 , 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.
comment:19 by , 16 months ago
| Keywords: | webpositive removed |
|---|---|
| Summary: | webkit: Text overlay not working on https://www.blender.org → css "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.
Tested on hrev54278 x86_64 w/ HaikuWebkit 1.7.0 (610.1.9). Result: FAIL