Advanced Search Dropdown Issue in Safari
Bas reported that the right-column advanced search dropdowns are misplaced in the top-right corner on Safari. jordan-vidrine found that this issue occurs on themes utilizing a background image with position: fixed and filter: brightness.
joffreyjaffeux suspected that the filter property might be causing the issue, but removing it did not resolve the problem. chapoi discovered that using ::after instead of ::before or changing the position to absolute also fixes the issue.
However, these solutions are not ideal, as they either hide the background image or change the intended behavior. The issue seems to be related to Safari’s handling of background-attachment: fixed, but a proper fix has not been found yet.
jordan-vidrine noted that the inspector shows the correct positioning, but the actual placement is incorrect. chapoi suggested that Safari might be using incorrect viewport coordinates.
A possible solution is to change the dropdown to position: absolute without a translate, but this might require changes to the detection logic.
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.