ladybird
ladybird copied to clipboard
LadybirdBrowser
CSS "clip" not being applied properly on input element
Summary
On https://www.btsearch.top/ there are multiple checkboxes with an icon and a label. They should show up like this (Firefox):
But they show up like this instead (Ladybird):
Note the little checkbox on the upper-left corner.
I noticed that in Firefox they show up the same as in Ladybird if you unset (disable) the clip property for the input element, se below (Firefox):
So apparently the clip property is applied badly or not at all, even if it's currently supported and parsed in LB.
I've checked and maybe it's the former option (?)
Operating system
Linux
Steps to reproduce
- Go to site
- Compare checkbox appearance with Firefox and Chrome
- Try disabling the CSS propery
clipfor theinputelement in Firefox as shown, and compare appearance with LB
Expected behavior
The little checkbox should not be visible
Actual behavior
The little checkbox is visible
URL for a reduced test case
NN
HTML/SVG/etc. source for a reduced test case
NN
Log output and (if possible) backtrace
NN
Screenshots or screen recordings
NN, see above
Build flags or config settings
LB 0cd5e99066a0824aa58a2ecae1c37eba51676c70, Linux
Contribute a patch?
- [ ] I’ll contribute a patch for this myself.
Minimal repro:
<!DOCTYPE html>
<input type="checkbox" style="clip: rect(0,0,0,0); position: absolute">
I will look into this issue
Note that this will probably be easier once #4565 gets in since it cleans up the clipping code and makes it so that elements don't need their own, bespoke implementations of it.
Someone also already posted a patch they had for this on the Discord, I'm not sure if they're opening a PR still though.
I looked into the problem and found this: I clicked on the label that you can see, which has the SVG inside it. The browser uses the label's "for" attribute to connect it to the hidden checkbox input. When I click the label, it automatically changes the state of the hidden input. The hidden input manages the checkbox's function, while the SVG in the label shows if the checkbox is checked or not. But it's the label that reacts to the click.
The problem happens because the hidden input can be seen in some browsers like Firefox and Ladybird. This is due to using the old clip: rect(...) property. Newer browsers are stopping support for clip and prefer clip-path instead. If clip doesn’t work or is used wrong, the input, even though it is absolutely positioned, does not become fully hidden and stays visible next to the SVG in the label. To fix this and hide it properly,we can replace clip with a newer method like clip-path: inset(50%) or make the input 1px by 1px in size and add overflow: hidden to it.
The problem happens because the hidden input can be seen in some browsers like Firefox and Ladybird.
The hidden input is not visible in Firefox, it gets clipped away correctly.
This is due to using the old
clip: rect(...)property. Newer browsers are stopping support forclipand preferclip-pathinstead.
Newer browsers are not dropping support for clip, it still exists in the spec and every browser.
Authors of websites should use clip-path instead though.
If
clipdoesn’t work or is used wrong, the input, even though it is absolutely positioned, does not become fully hidden and stays visible next to the SVG in the label.
clip is being used correctly here and the fact that it doesn't work is the problem that this bug report is about.
To fix this and hide it properly,we can replace
clipwith a newer method likeclip-path: inset(50%)or make the input 1px by 1px in size and addoverflow: hiddento it.
No, we cannot fix it like that because we don't own that website. This is a bug in the browser, not in the website.
Got it, thanks for your input. It looks like the problem is with the clip. Sorry, I can’t fix it right now because I’m still setting up the project on my computer. I need to test everything properly before making changes. This setup and learning process might take 2 to 3 days.
Got it, thanks for your input. It looks like the problem is with the clip. Sorry, I can’t fix it right now because I’m still setting up the project on my computer. I need to test everything properly before making changes. This setup and learning process might take 2 to 3 days.
Specifically, what needs to happen is that CheckboxPaintable, before drawing any of its contents, needs to apply the clip rect, here: https://github.com/LadybirdBrowser/ladybird/blob/9d5f6108e40a2ae0a04a9e1c3f2d4e2114159b2e/Libraries/LibWeb/Painting/CheckBoxPaintable.cpp#L70
This would be similar to what PaintableWithLines does here: https://github.com/LadybirdBrowser/ladybird/blob/9d5f6108e40a2ae0a04a9e1c3f2d4e2114159b2e/Libraries/LibWeb/Painting/PaintableBox.cpp#L855-L879
(Note that it also needs to un-apply the clip once it's done drawing.)