Probleme mit der Darstellung unter MacOS/iOS bei bestimmten Besuchern

Syntafin

Da mich der mmaark darauf hinwies, und mir bis eben bekannte Fragen die Apple Geräte haben keine Möglichkeit bleibt, hier mal die Frage in die Runde, ob die Darstellung eines gewissen Elementes auf meiner Seite:

Syntafin

Willkommen bei meiner kleinen Galerie, hier landen hauptsächlich Aufnahmen aus Spielen. Manches sind einfache Screenshots, manches aber auch aufwendig…

syntafin.de

für andere ebenfalls "falsch" ist. Vorab die Information: Wer DarkReader oder entsprechende Browser-Einstellungen verwendet zum "erzwingen" eines "Dark Modes" ist.... disqualifiziert eigentlich, verfälschte falsche CSS Dateien sind nicht hilfreich (CoinMiner Browser Ergebnisse jucken mich ebenfalls nicht... es geht um Apple + Safari [WebKit]).

Wie es nicht aussehen sollte, aber scheinbar bei Apple + Safari aussieht:

Wie es aussehen sollte:

Weil ich kann mir das absolut nicht erklären. Probiere ich es selbst mit Epiphany (WebKit) aus, sieht es wie es sein soll aus:

Hoffe hier hat noch die ein oder andere Person ein wenig Feedback dazu, oder sogar die Lösung für dieses Apple-Problem.

Blacksonny

Sieht bei mir auch falsch aus, interessant wäre die CSS dahinter. Safari verwendet denke ich auch eine andere Rendering Engine. Somit könnte es opacity (sieht danach aus) anders rendern als andere Browser.

Daher wäre es hilfreich die CSS dahinter zu sehen.

Syntafin

Zitat von Blacksonny

Safari verwendet denke ich auch eine andere Rendering Engine.

Safari verwendet WebKit .

Spezifisch das CSS das auf die Kategorie Liste angewendet wird:

CSS

    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    --fina-color-primary: #86198f;
    --fina-color-secondary: #f5d0fe;
    --fina-text-light: #f9fafb;
    --fina-text-dark: #111827;
    --primary-50: 236 253 245;
    --primary-100: 209 250 229;
    --primary-200: 167 243 208;
    --primary-300: 110 231 183;
    --primary-400: 52 211 153;
    --primary-500: 16 185 129;
    --primary-600: 5 150 105;
    --primary-700: 4 120 87;
    --primary-800: 6 95 70;
    --primary-900: 4 78 56;
    --primary-950: 2 44 34;
    --surface-0: 255 255 255;
    --surface-50: 250 250 250;
    --surface-100: 244 244 245;
    --surface-200: 228 228 231;
    --surface-300: 212 212 216;
    --surface-400: 161 161 170;
    --surface-500: 113 113 122;
    --surface-600: 82 82 91;
    --surface-700: 63 63 70;
    --surface-800: 39 39 42;
    --surface-900: 24 24 27;
    --surface-950: 9 9 11;
    --primary: var(--primary-500);
    --primary-inverse: var(--surface-0);
    --primary-hover: var(--primary-600);
    --primary-active-color: var(--primary-600);
    --primary-highlight-opacity: .1;
    --primary-highlight-inverse: var(--primary-700);
    --primary-highlight-hover-opacity: .2;
    line-height: inherit;
    letter-spacing: .05em;
    --tw-text-opacity: 1;
    white-space: nowrap;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    color: inherit;
    text-decoration: inherit;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    background-color: #a21caf1a;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

Alles anzeigen

Kann man auch direkt sehen man darf nur nicht den Fehler des "Quelltext anzeigen" begehen:

Blacksonny

Muss ich mir mal selber anschauen mal sehen, ob ich mit dem iPad auf die DevTools zugreifen kann. Bin mir fast schon sicher hat etwas mit dem backdrop-filter zu tun.

mmaark

Blacksonny, hast du auch vom Safari, die Version 18 installiert?

Bei Version 17, wäre der Fehler noch nicht da gewesen. Aber erst mit dem Update auf Version 18.

Unter Mac, nicht am iPhone.

Blacksonny

Ja mit IOS 18

mmaark

Zitat von Blacksonny

Ja mit IOS 18

Genau,

bei iOS 17, wurde die Seite normal angezeigt. Ich habe auch iOS 18, da ist der Fehler.

Hast du einen Mac? Damit du es Safari testen könntest?

Aber ich glaube wenn man es am iPhone falsch angezeigt bekommt, dann wird der Fehler am Mac unter Safari auch angezeigt. Zu mindestens bei mir.

Neben Problem.

Wenn ich am Handy, beim iPhone, Firefox,Chrome,Edge und Opera öffne, und auf die Seite gehe, ist auch das selbe Problem.

Kannst du das auch bestätigen, dass am iPhone Firefox usw, auch das selbe Problem angezeigt wird?

z.b Firefox unter iOS 18, am iPhone siehe , Screenshot

z.b Firefox andere Browser, am Mac, sind keine Probleme dargestellt.

Syntafin

Einen gewissen Zusammenhang kann man da langsam feststellen, da es allesamt iOS 18 sind.

mmaark

Zitat von Syntafin

Einen gewissen Zusammenhang kann man da langsam feststellen, da es allesamt iOS 18 sind.

Ja iOS 18 ist derzeit neu herausgekommen. iOS 18.1 kommt bald heraus. Vielleicht ist da das Problem nicht mehr vorhanden. Und bei MacOS wird auch ein größeres Update veröffentlicht mit Fehlerbehebungen und so. Vielleicht warten wir einfach mal auf das nächste Update ab. Vielleicht verschwindet dann der Fehler?!

Blacksonny

Krasse Erkenntnis mmaark dann liegt es scheinbar an IOS 18. Ob die diesen Fehler im Fokus haben sei mal dahingestellt

mmaark

Zitat von Blacksonny

Krasse Erkenntnis mmaark dann liegt es scheinbar an IOS 18. Ob die diesen Fehler im Fokus haben sei mal dahingestellt

Ja stimmt, ob dieser Fehler behoben wird weiß man nicht.

Wenn nicht, dann muss es ja eine Lösung geben die Homepage an Safari zusätzlich anzupassen oder?

Syntafin

Wenn Apple es seine gelegentliche Disfunktion in der Verwendung von backdrop Filtern nicht korrigiert, kann man da leider nicht viel machen, außer eventuell auf Backdrop Filter zu verzichten, was leider eine Menge sind...

Zumal unverständlich ist für mich wieso es nur diesen Part betrifft, da ich Backdrop Filter überall einsetze (sämtliche UI Elemente).

Ich kann nur tippen das es auf die Hintergrundfarbe irgendwie reagiert (IIRC sind die Fuchsia-100/10)

Blacksonny

Ist gut möglich, dass er bei gewissen Farben anders reagiert. Ich wüsste jetzt auch nicht wo man nachsehen könnte, ob Apple diesen Fehler schon gemeldet bekommen hat

mmaark

Komisch.

Bin drauf gekommen, am alten iMac Rechner habe ich die Safari Version auf 18.0.1 Update gemacht, dafür ein älteres MacOS Betriebssystem. Da wird es richtig angezeigt, die Seite.
Wenn ich aber auf meinem aktuellen Mac Safari öffne, die gleiche Versionsnummer hat: 18.0.1 , aber dafür das aktuelle MacOS Betriebssystem, da kommt es mit den Farben nicht Klar.

bei iOS 18, am iPhone, älteres Handy Modell, zeigt es falsch an, mit anderen Farben. bei iOS 17, kann ich leider nichts sagen.

Sollte ich mal ausprobieren , den Cache löschen, und die Seite wieder neu auf machen?! => Hab ich probiert, bleibt gleich, der Fehler. Aber bei dir Blacksonny zeigt es unter iOS 18 auch falsch an oder?

Kann ja nicht das Betriebssystem, schuld haben oder?

Blacksonny

Ja bei mir unter IOS18 passiert. Klingt definitiv fragwürdig, aber kann man aktuell leider nichts machen denke ich nur vorübergehend eine Lösung entwickeln bis Apple das Problem von Haus aus behebt.

mmaark

Zitat von Blacksonny

Ja bei mir unter IOS18 passiert. Klingt definitiv fragwürdig, aber kann man aktuell leider nichts machen denke ich nur vorübergehend eine Lösung entwickeln bis Apple das Problem von Haus aus behebt.

Ja genau,da hast du Recht.

MacOS und iPhone OS , sind Unterschiede.

Aber ich werde davon berichten, wenn Updates vom iPhone und MacOS erscheint, wenn es wieder funktioniert.

evarioo

Krasser Stuff. Hab das mal nach gebaut und bin erstaunt das ich das nicht wusste! Gibt es denn eine Möglichkeit das CSS direkt an Safari anzupassen bzw diese WebKit Option so zu „bescheissen“ das es gleich aussieht??

mmaark

OK, Updates sind für MacOS und iPhoneOS herausgekommen.

Noch immer der gleiche Darstellungseffekt.

Ich teste unter:

macOS Version: 15.1.1

Safari Version unter MacOS: 18.1.1

iPhoneOS : 18.12.1

Safari Version unter iPhoneOS, die neueste/aktuellste.

Teste ich aber andere Browser, unter Apple Geräte, ohne iPhone. Dann funktioniert es.
unter iPhone, aber andere Browser, ist der gleiche Fehler.

Probleme mit der Darstellung unter MacOS/iOS bei bestimmten Besuchern

Jetzt mitmachen!

Tags

Benutzer online in diesem Thema