The right-column advanced search dropdowns are in the top-right corner instead of where I expect them
Mac (desktop)
Safari
Good find, this is a really weird one. It’s only the items in the right column as well. This is happening on any theme that utilizes a background image using
body::before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
filter: brightness(var(--brightness));
background-image: url($blobs-other), url($blobs-yellow), url($blue-wave);
background-size: 103vw, 103vw, 100vw;
background-repeat: no-repeat;
background-position: 50% 125%, 0px 95px, 0px 175px;
@media screen and (max-width: 1000px) {
background-attachment: scroll;
}
@media screen and (max-width: 800px) {
background-size: 103vw, 103vw, 200vw;
background-position: 50% 125%, 0px 95px, 0px 175px;
}
}
I see it is present on the air and graceful themes as well, which both do this.
Wild guess, but I suspect filter is changing stacking context and might cause issues? Can you think of a different way to do this background jordan?
As a first step could you try without filter and see if it works?
I did try that, but it doesnt work. To my knowledge, attaching it via before is the only way to get this working and not have the page/scroll be affected.
Wow what a weirdo bug. Absolute works but fixed breaks it. Weirdly enough, using ::after instead of :before also works…
I tried testing this in the inspector, but swapping to ::after hides the bg image.
Oh sorry I didnt mean to say that was a solution. Neither is, I was just pointing out what else is related to the weirdness.
Basically anything that “removes” the image from the background, be it postioning, after, or setting width to 0, “fixes” the dropdown
Joffrey suspected this could be an issue with safari. What is really odd is that the inspector shows that the menu should be placed appropriately on the screen. The pixels and numbers are correct.
This is made evident on safari if you uncheck “fixed” and then turn it back on in the menu placement, the menu then is correctly positioned.
Since this sort of use-case for BG images has been in effect since prior to 2020, I wonder if this is recent, or if this never worked, and this is the first time we are hearing of it.
I’ve seen it that too. Never before experienced that. It almost feels like it’s positioning itself against wrong viewport coordinates or something (eventho the translate3d coordinates are correct in the inspector, they don’t match the actual position) and then we re-applying the property, it has rectified itself.
Safari has a whole bunch of mentions of background-attached:fixed not working properly, could be related to that somehow. None of the speculation offers a fix tho 
We could change the dropdown to position:absolute, without a translate, that works. The way it’s done now is a bit weird to begin with imo.
Yeah this is a good point. Shouldn’t it always be either above, or under its input box? Maybe the detection needed forces us to use translate.
This is now fixed.