placeholder color, font-size in <input> on Firefox , line wrap in <textarea>

[Mapaler]

Bug reports:

Full picture

Content	Real - Firefox	H2C - Firefox	H2C - Chrome
Placeholder
String

Decomposing pictures

Content	Real - Firefox	H2C - Firefox	H2C - Chrome
border-style: dashed;			Same with Firefox
Placeholder <Input>
Placeholder <textarea>		Blank	Blank
String <Input>
String <textarea>

Detailed explanation

1. border-style: dashed; drawing error.

   Real - Firefox	H2C - Firefox	H2C - Chrome
   		Same with Firefox

2. font-size with <input> drawing error in Firefox.

   Real - Firefox	H2C - Firefox

3. color with <input>::placeholder drawing error.

   Real - Firefox	H2C - Firefox	H2C - Chrome

   H2C uses string color, not placeholder color. If I modify the text color to red, the placeholder drawn by H2C is also red.
   
   ▼
   

4. Placeholder in <textarea> is not draw.

   Real - Firefox	H2C - Firefox	H2C - Chrome
   	Blank	Blank

5. Line wrap in <textarea> is not drawn.

   Real - Firefox	H2C - Firefox	H2C - Chrome

Related pages

https://mapaler.github.io/PADDashFormation/

Specifications:

• html2canvas version tested with: v1.0.0-rc.3
• Browser & version: Firefox Developer Edition 68.0b10 (64 bit) | Chrome 75.0.3770.90
• Operating system: Microsoft Windows 10 1809 [Ver 10.0.17763.557]

[nidi3]

Line wrap in textarea is a duplicate of #2008 ?

[Mapaler]

Yes.

In order to solve this problem, I have now converted <input> content into <div> in my program, so I can solve it.

Thank you for your work.

Only the dotted line border I don't know how to do yet.

[MacrazdHao]

How can u solve the problem of dotted line border at last? If you solved it, please, tell me.

[niklasvh]

Dotted borders are now supported https://html2canvas.hertzen.com/results/border-dotted!Chrome_Stable-Chrome-92.0.4515.131.png

[MacrazdHao]

hello, I thought of a greate solution just now, you can use the div tag to draw a dashed or dotted line
.dashed {
width: 100%;
overflow: hidden;
margin-top: 10px;
white-space: nowrap;
line-height: 1px;
height: 1px;
font-size: 0;
letter-spacing: 4px;
.line {
display: inline-block;
width: 4px;
height: 1px;
background-color: #999999;
}
}