Strange CSS drop-shadow bug in Chrome only?

user_1739037 0
Viewed 2411

Seeing a very strange glitch with a large drop shadow on a site that is in development. Only seems to happen in Chrome. Glitch will disappear and reappear as window is re-sized.

url: https://w3stage.com/pok/order/

img: drop shadow issue

css:

.set-container {
    background: #f7f7f7;
    border-radius: 7px 7px 0 0;
    padding: 30px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    width: 90%;
    box-shadow: 0 70px 70px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    align-content: center;
}

edit: i am on macOS, Chrome Version 81.0.4044.138 (Official Build) (64-bit)

dropshadow css
2 Answers

I managed to get the same result in specific window sizes.

I played around a little bit and what seemed to cancel this issue was removing the border-radius definition from the .set-container class definition.

I am not sure why it worked, but I have seen in my experience that shadows and border-radiuses sometimes have issues. You could consider restructuring that part or just removing the border-radius.

Just as additional info, I was able to reproduce the issue on:

Chrome 83.0.4103.61 (64-bit)

Window size: 936 <= Width < 1200 and 701 < Height < 763.

I am not sure if there's something specific about those dimensions in your case, but that's where I seem to get the extra shadow.

UPDATE

I did test something else that does not have issues (as far as I am aware) with the border-radius.

I switched from box-shadow to filter: drop-shadow. The end result is this line:

filter: drop-shadow(0 70px 70px black);

It looks a little bit different than the box-shadow rule, but does the trick and doesn't have issues with the border-radius.

user_11696860

I am also seeing this aberration in Chrome v86 on a PC and in Chrome v86 on an iPad. I found that I could reliably make the effect half as large (huh?) by eliminating overflow: hidden from the parent div to my image (which has the drop shadow).

user_17575850
Related