Cannot read the webpage text

philipheinser commented 7 months ago

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 commented 7 months ago

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

philipheinser commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

ovflowd commented 7 months ago

@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 commented 7 months ago

(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 commented 7 months ago

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 commented 7 months ago

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

canerakdas commented 7 months ago

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;

Command + Shift + r
Command + r
Click a URL bar and redirect the site

https://github.com/nodejs/nodejs.org/assets/14062599/fb8d52af-b5f0-4ca8-bcc5-0eb9c8bba2fc

ovflowd commented 7 months ago

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

AugustinMauroy commented 7 months ago

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

Honestly, I can't see what would cause this in our code. Secondly, it's very random. I haven't managed to make a procedure to make this bug appear. And I haven't managed to make it disappear either.

So for me it's issue on SVG rendering from WebKit.

canerakdas commented 7 months ago

I have opened a bug report on WebKit, you can track it down with the following URL;

https://bugs.webkit.org/show_bug.cgi?id=271615

AugustinMauroy commented 6 months ago

I close this pr because we no longer display the SVG using css. But I'm keeping an eye on the issues for webkit.

nodejs / nodejs.org