New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
LadyBird menuShadow drawing random box #23937
Comments
To add to this, the relevant bit of styling that is being rendered incorrectly is: .menu-shadows {
box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
} |
All right, so your simplified reduction is basically this: <style>
div {
box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
}
</style><div> This should be a pretty self-contained bug, I would think! I would start looking at (cc @MacDue and @kalenikaliaksandr who have worked on this code in the past) |
I tested this too:
In this case there is the bug. So my guess is that the issue occurs only for block boxes (the |
From experimenting a bit, the bug only seems to occur when the blur radius, spread radius, and font-height match up in some strange combination. I think figuring out the dependence between those might help suggest where the bug occurs. |
It seems like there is unexpected behavior when one of the last two of the four length values (blur-radius and spread-radius) are negative. On Chrome it is just a blank page, but on Ladybird it looks like this: Minimized problem shown above: <style>
div {
margin-bottom: 300px;
}
</style>
<div style="box-shadow: 0px 0px 10px -10px rgba(0, 0, 0, 0.6)"></div>
<div style="box-shadow: 0px 0px -10px 10px rgba(0, 0, 0, 0.6)"></div> But when both values are positive or both are negative, it seems to match the expected behavior with both Chrome and Ladybird showing a blank page. |
It looks like this bug might be happening because the parameter // void paint_box_shadow(PaintContext& context, ....
dbgln("BordersData:\tT: {}\tB: {}\tL: {}\tR: {}", borders_data.top.width,
borders_data.bottom.width, borders_data.left.width, borders_data.right.width);
if (borders_data.top.width == 0 && borders_data.bottom.width == 0 && borders_data.left.width == 0 && borders_data.right.width == 0) {
return;
}
// for (auto& box_shadow_data..... |
Adding these two max checks prevents the shadowbox corners from swapping strangely: auto expansion = spread_distance - (blur_radius * 2);
DevicePixelRect inner_bounding_rect = {
device_content_rect.x() + offset_x - expansion,
device_content_rect.y() + offset_y - expansion,
max(0, (device_content_rect.width() + 2 * expansion).value()),
max(0, (device_content_rect.height() + 2 * expansion).value())
}; Enlarged version showing corners are no longer being swapped: |
Add checks to prevent negative width and height in inner_bounding_rect within get_outer_box_shadow_configuration. This fixes issues with shadow corner swapping due to incorrect bounding box dimensions. Fixes: SerenityOS#23937
Hello, I am a student at the university of Utah working on ladybird for my final project in CS 4560 Web Browser Internals. While going through our Universities computing website we noticed that the browser will randomly draw rectangles in both corners
Chrome:
LadyBird:
Our group minimized the bug to some simple html:
My group wants to resolve this bug and want to know if this feasible for people not very familiar with the code. We know that it is due to the menu shadows so we've been looking through the CSS of that. So any comments and help would be awesome! Thank you!
The text was updated successfully, but these errors were encountered: