tanstack.com icon indicating copy to clipboard operation
tanstack.com copied to clipboard

Transparent background of search panel makes text hard to read

Open Feuermurmel opened this issue 8 months ago • 0 comments

This is how the search panel at https://tanstack.com/query/latest/docs/framework/react/overview looks in Safari 18.5 (most recent version):

Image

The search results are very hard to read for me. Compare this to an opaque background (set via web inspector):

Image

The panel does have a backdrop-filter: blur(16px). While still not as good as a white background, it helps a lot with readability. The problem seems to be that backdrop-filter is not yet enabled by default in Safari (it is still marked as Testable), resulting in the transparent background:

Image

The compatibility info at MDN is wrong. Relevant issue: https://github.com/mdn/browser-compat-data/issues/25914

Feuermurmel avatar May 21 '25 10:05 Feuermurmel