Comments (5)
I've been poking around the code a bit, and I suspect that this bug occurs when filtering out the default styles. This would make sense because only the #000000
value (which I assume would be the default) gets dropped.
from modern-screenshot.
Fixed in 4.4.17
from modern-screenshot.
Could you please provide me with the code of the problem? I don't seem to find the problem there
from modern-screenshot.
Hello, I'm sorry for the huge delay.
But I finally got around to do some debugging and thought you might be interested. It turns out that the text-stroke copying is somehow dependent on color! This is probably why we were seeing different output. I hope this is useful. For now, a quick hack I'm using is to use #000001
as an approximation to black.
Example output
When using -webkit-text-stroke: 1px #000001;
:
<div class="view_body" style="transition-property: none; -webkit-text-stroke: 1px rgb(0, 0, 1); -webkit-locale: "en"; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); min-width: auto; min-inline-size: auto; min-height: auto; min-block-size: auto; inline-size: 120.883px; height: 56px; font-size: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;"><div style="font-size: 56px; transition-property: none; -webkit-text-stroke: 1px rgb(0, 0, 1); -webkit-locale: "en"; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); inline-size: 120.883px; height: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;">xxx</div></div>
And when I use -webkit-text-stroke: 1px #000000;
:
<div class="view_body" style="transition-property: none; -webkit-text-stroke-width: 1px; -webkit-locale: "en"; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); min-width: auto; min-inline-size: auto; min-height: auto; min-block-size: auto; inline-size: 120.883px; height: 56px; font-size: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;"><div style="font-size: 56px; transition-property: none; -webkit-text-stroke-width: 1px; -webkit-locale: "en"; width: 120.883px; transform-origin: 60.4414px 28px; text-shadow: rgb(0, 0, 0) 2px 2px 0px; text-emphasis-color: rgb(240, 117, 158); text-decoration: none solid rgb(240, 117, 158); perspective-origin: 60.4375px 28px; outline-color: rgb(240, 117, 158); inline-size: 120.883px; height: 56px; font-family: __Luckiest_Guy_71c594, __Luckiest_Guy_Fallback_71c594; column-rule-color: rgb(240, 117, 158); color: rgb(240, 117, 158); caret-color: rgb(240, 117, 158); box-sizing: border-box; border-color: rgb(240, 117, 158); border-inline-color: rgb(240, 117, 158); border-block-color: rgb(240, 117, 158); block-size: 56px;">xxx</div></div>
from modern-screenshot.
Also, forgot to mention, it occurs if the color is set with -webkit-text-stroke: 1px black;
and even when separating the property into -webkit-text-stroke-color
and -webkit-text-stroke-width
.
from modern-screenshot.
Related Issues (20)
- domToPng 执行过程会阻塞 UI 线程渲染 HOT 1
- scrollbar problem HOT 1
- iled to drawImage DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. HOT 6
- Fonts are not applied in Safari. HOT 10
- 自定义标签的一般应对方法。 HOT 4
- The rendered image has a text cloning bug. HOT 1
- Grey boxes surrounding all nodes in image
- There are gray boxes inside the picture
- How Screenshot of hidden div using modern-screenshort HOT 5
- Getting blank white image when taking screenshot in Firefox. HOT 2
- 文字渐变不支持 HOT 5
- Default font on Firefox HOT 2
- div style is positiion: fixed;don't get img??
- 生产的图片很模糊,如何调整呢 HOT 1
- How do I manage cors with images? HOT 1
- 在高清屏下图片分辨率太低 HOT 1
- 背景图是 http 资源时,生成图片有概率丢失 HOT 2
- html元素中包含emoji表情时,生成报错 HOT 8
- [modern-screenshot] Failed image load data:image/svg+xml;charset=utf-8,... HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from modern-screenshot.