Cannot read the webpage text

[philipheinser]

URL:

https://nodejs.org/en

Browser Name:

Safari

Browser Version:

19618.1.15.11.12

Operating System:

MacOS

How to reproduce the issue:

Background makes the text not readable. Also the old website had always easy download buttons for latest and lts really hard to see what version I download. I would suggest to bring back the 2 easy big buttons.

[AugustinMauroy]

Yep that awful but we cannot do something it's an bug from WebKit

[philipheinser]

@AugustinMauroy Just get rid of the black grid or give the text a background color would be easy fixes could also be done only in webkit if the issue only exists there? Even if the bug comes from a browser don't you want your users to have a good experience?

[AugustinMauroy]

I'm going to look into putting a background on the text just on safari.

If we add code for that it's will look like that:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    @apply flex
         flex-col
         bg-withe
  }
}```

[ovflowd]

@AugustinMauroy Just get rid of the black grid or give the text a background color would be easy fixes could also be done only in webkit if the issue only exists there? Even if the bug comes from a browser don't you want your users to have a good experience?

This issue only happens on very edge scenarios and old versions of Safari. Most of the time, it is non-reproducible.

Even on my iPhone and Mac this is not reproducible 🤷

[philipheinser]

@ovflowd Its the newest version of safari. Without any extensions.

[ovflowd]

@ovflowd Its the newest version of safari. Without any extensions.

Unfortunately I'm not able to reproduce it. Do you have some specific accessibility setting? Reduced animations, or higher contrast settings or something?

[ovflowd]

(I can't fix a bug that doesn't happen to me, as I don't know what even to look for, the gradient has no setting at all or colour that would make it look like the way it is looking to you)

So any extra detail would be more than appreciated!

[canerakdas]

I was able to reproduce it, interestingly, it downloads the hexagon svg 7 times;

The chunks are the same but the behavior seems different, it's a bit interesting 🤔

[ovflowd]

Reopening as one of our collaborators was able to reproduce it and they can work on a fix!

[canerakdas]

I think this is due to an issue on the Webkit side, as @AugustinMauroy mentioned. After switching to Reader mode, the background color is somehow reflected in our semi-transparent hexagons.

You can reproduce this via the following steps;

1. Command + Shift + r
2. Command + r
3. Click a URL bar and redirect the site

Screen.Recording.2024-03-25.at.02.39.42.mov

[ovflowd]

Can we confirm this is a WebKit issue? Should we open a bug report on WebKit?