[Bug] spoiler tag werkt niet op samsung internet browser

[j-phone]

De spoiler tag werkt niet met de samsung internet browser op het forum.

Versie samsung internet browser: 14.0.1.62
Test url: [Multi] The Elder Scrolls V: Skyrim - Deel 7
Device: samsung galaxy fold 2
OS: android 11

Bij het browsen van bovenstaande url staat de text in een spoiler gewoon open.

[eLScha]

En op een ios device toont de tekst niet als je hem selecteert.

[j-phone]

Aanvulling: de telefoon of browser moet wel in dark mode staan om het issue te kunnen reproduceren.

[ Voor 5% gewijzigd door j-phone op 21-04-2022 17:51 ]

[DaFeliX]

j-phone schreef op donderdag 21 april 2022 @ 17:49:
Aanvulling: de telefoon of browser moet wel in dark mode staan om het issue te kunnen reproduceren.

Dit is dan waarschijnlijk de oorzaak.

Een spoilertekst bevat zwarte tekst met een zwarte achtergrond, zodat je de tekst niet direct ziet maar wel kunt selecteren om te tonen (of je klikt er op, dan wordt de tekst wit).
De dark-mode van je browser past tekstkleur en achtergrondkleur aan om een dark-mode te creeeren, en probeert een goed contrast tussen voor- en achregrond te krijgen. Het gaat hier waarschijnlijk fout, doordat er bewust gekozen is voor een contrast van 0 voor de spoiler-tags, iets wat de browser waarschijnlijk niet verwacht. Hij probeert gewoon alsnog een goed contrast te krijgen, waardoor de tekst zichtbaar wordt.

Een mogelijke oplossing zou zijn om de tekst niet dezelfde kleur te geven als de achtergrond, maar helemaal te verbergen totdat je klikt. Het nadeel van die oplossing is dat het selecteren van de tekst dan niet meer werkt om 't te tonen.

Ik denk dus niet dat dit eenvoudig op te lossen.

[j-phone]

Je kan dark mode detecteren met css en/of javascript en dan eventueel een onclick event doen voor dat device? Dus dat je op je mobiel moet klikken ipv text selecteren.

JS methode: https://flaviocopes.com/javascript-detect-dark-mode/
CSS: https://css-tricks.com/dark-modes-with-css/

Ik weet niet of alle (mobiele) browsers dit ondersteunen.