Forenindex » Web allgemein » HTML und CSS / Stylesheets » css3 und webgl (safari)

css3 und webgl (safari)

bernhard
Beiträge gesamt: 444

2. Aug 2013, 12:18
Bewertung:

gelesen: 2785

Beitrag als Lesezeichen
hallo zusammen,

gerade nutze ich die sommerferien, um mich mit css3 im detail auseinander zu setzen. als projekt habe ich mir die neugestaltung meiner privaten website vorgenommen. anstatt der herkömmlichen roll-over navi http://www.bernd-scheurer.de soll das jetzt eine minimale navi auf basis einer ausfahrbaren liste werden - was bislang auch ganz gut funkioniert http://www.bernd-scheurer.de/sandbox/

hierbei sind mir aber ein paar interessante dinge aufgefallen:
das neue menü benutzt hover-effekte, transitionen (weiche bewegungen), und verläufe (gradients). im moment teste ich nur unter mac (safari, firefox, opera, chrome), da mein virtuelles windows xp nur über einen IE8 verfügt.

firefox stellt alle programmierten optionen klaglos und perfekt dar. eine wahre freude. ebenso verhält sich das bei chrome.
opera will keine animationen (transitions) darstellen und bei safari war erst mal alles unbrauchbar: keine padding-werte (!? - ist ja keine css3-errungenschaft), keine gradients, keine transitions und keine hover-effekte (?! - auch nicht neu, diese option).

nach längerem suchen und probieren, kam ich dann auf die idee, im entwicklermenü die option "WebGL" zu aktivieren. plötzlich hat alles funktioniert. das wirft nun mehrere fragen auf: obwohl safari traditionell die aktuellen techniken unterstützt, ist WebGL standartmässig deaktiviert und somit css3-techniken auch. wer das nicht weiss, sieht eine deutlich reduzierte seite. warum ist das so? wird sich das ändern? weshalb sind davon auch so rudimentäre dinge wie padding-abstände und hover betroffen?

bei der gelegenheit erfuhr ich auch, dass bei opera WebGL auch standartmässig deaktiviert ist. leider habe ich dort die option zum aktivieren nicht gefunden.

ich würde mich über erfahrungen aus dem forum freuen, weil ich meine seite gerne so gestalten möchte, dass alle in den selben genuss kommen. gerade beim safari irritiert mich diese entdeckung doch sehr...

vielen dank und grüße
bernd
http://www.be-sign.net / unterricht.bernd-scheurer.de

iMac Retina 5K, 27" 3,8GHz i7,
- 32GByte RAM, 10 TByte HD (intern & extern), OS X 10.15.3
MacbookPro 16", M1 Pro
- 32 GByte Ram, 2 TB HD

Adobe Creative Suite CC / Divi-Builder/-Theme
Logic Por X / Native Instruments Reaktor

css3 und webgl (safari)

admaster
Beiträge gesamt: 75

26. Aug 2013, 17:43
Bewertung:

gelesen: 2664

Beitrag als Lesezeichen
Hallo Bernd!

Das hat mit WebGL nichts zu tun. Wenn das noch aktuell ist, verwendest Du in Deinem CSS nur den Vendor-Präfix für webkit (Safari und Chrome).

Sollte so aussehen, dann berücksichtigst Du alle "moderneren" Browservarianten:

-webkit-transition: all ;
-moz-transition: all ;
-ms-transition: all ;
-o-transition: all ;
transition: all ;

Die Anweisung ohne Präfix kommt immer an Schluss.

LG Jürgen


"Wer aufhört zu werben, um Geld zu sparen, kann ebenso seine Uhr anhalten, um Zeit zu sparen." Henry Ford

css3 und webgl (safari)

bernhard
Beiträge gesamt: 444

31. Aug 2013, 11:42
Bewertung:

gelesen: 2615

Beitrag als Lesezeichen
hallo jürgen,

vielen dank für deine antwort.
ja, komische sache. wie bereits erwähnt, lief das bei safari erst nach der aktivierung von WebGL. mittlerweile tut das auch ohne und ich habe keine ahnung wieso das so war/ist.

überhaupt ist der safari in mancherlei hinsicht etwas nervig. das ausschalten des cache im entwicklermenü muss bei jedem browserstart wieder neu vorgenommen werden. oft wird das löschen auch erst wirksam, wenn man safari beendet und neu startet.

im moment bette ich eine javascript-animation (tumult hype) ein und habe nur bei safari das problem, dass mouse-over-events verschluckt werden. aber eben auch nicht immer. schade eigentlich.
das macht (leider und erschreckenderweise) der IE unter Win8 (parallels) bedeutend stressfreier!

lg
bernd
http://www.be-sign.net / unterricht.bernd-scheurer.de

iMac Retina 5K, 27" 3,8GHz i7,
- 32GByte RAM, 10 TByte HD (intern & extern), OS X 10.15.3
MacbookPro 16", M1 Pro
- 32 GByte Ram, 2 TB HD

Adobe Creative Suite CC / Divi-Builder/-Theme
Logic Por X / Native Instruments Reaktor

(Dieser Beitrag wurde von bernhard am 31. Aug 2013, 11:43 geändert)