[Résolu] Animations inactives sur SAFARI

bizzare en effet
chez moi donc:
Safari, FF, Krom et Brave je ne vois que l'anim des mots rock en oblique

tu devrais isoler tes anims une par une dans un nouveau fichier clean
avec uniquement le code html et css qui les concerne

bon courage

OK. J'ai, en modifiant je ne sais pas quoi (je n'arrête pas de faire des tentatives depuis ce matin) arrivé à qq chose
Peut-être...
Comment copier le code complet (fichier HTML) d'une page sur Safari ?
Merci

c'est très aléatoire, ça ne fonctionne pas 99% du temps chez moi... mais les 1% restant, c'est animé sur Safari .

bizzare, chez moi je ne vois que l'anim des grands ROCK et rien d'autre
dans Safari, FF, Chrome et brave

pour trouver le bug, tu devrais isoler chaque anim une par une dans un nouveau fichier avec uniquement le code html et css qui les concerne.

Chose étrange, j'ai mon imac connecté à un grand écran.
Quand j'ouvre le site sur SAFARI sur l'ordinateur portable, cela ne fonctionne pas.
Si je glisse la fenêtre sur le grand écran, ça se met à fonctionner.
Ça fonctionne toujours quand je glisse la fenêtre du grand écran sur le portable.
Si je rafraichis la page (sur le portable donc), cela ne fonctionne plus etc etc.
D'où cela peut-il venir ?
Merci pour ton aide.

Réponse du forum US de Safari :
Check whether the web inspector is reporting JavaScript or CSS animation errors, update to Ventura, check for updates to your JavaScript or CSS animation tooling, then check with the WebKit folks.
?????
Une idée ?
Merci à vous

Bonsoir,

je viens de jeter un oeil.

Tu est revenu sur
* les text-shadow et calc( var(--var)) donc ça marche ou pas dans Safari ??
* re-du vw pour le font-size (marche pas .... des que la fenêtre change en largeur (vu précédemment).
* re-du top:-8px au lieu de faire un reset à zero sur les marges de body. et eventuellement sur les p et titre.

Les styles des textes défilant ne sont pas tous appliqués à partir du même conteneur , les styles communs peuvent être regroupés dans une class pour faire simple. Les class peuvent aussi t'aider à tester, appliquer et trouver les valeurs adéquates.

Possible reprise de ton code (sans ombrage et margin reset, avec un simili font-size vw basculer en px au chargement : https://jsfiddle.net/p79gh2nz/

Merci pour la translate gcyrillus,
savanes inconnues...
J'ai de gros prob avec l'inspecteur... je ne sais pas comment il fonctionne
Je sais... c'est indispensable
La page a été testée sur deux Mac différents, dont un constamment mis à jour.
Le code est validé par W3C HTML et CSS excepté deux erreurs :

Propriété erronée : font-family n'est pas un opérateur correct : "ralewaythin" Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Black",sans-serif

et

Erreur lors de l'analyse grammaticale. data-orientation="vertical" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1"

Impossible à comprendre
Je ne sais pas dans quoi je me suis embarqué
SOS !!!
Bonne soirée,
P.

okay et https://jsfiddle.net/p79gh2nz/ à donné quoi ?

Pour l'inspecteur, dans le(s) menu(s) de ton/tes navigateurn, tu as un sous menu vers outils ou outils du navigateur / outils de develloppement cela t'ouvre la boite d'outils , il y en as pleins et pas tous similaire d'un navigateur à l'autre, mais tu y trouveras plein d'infos Il te faudra un moment pour en tirer parti et selon tes connaissances.
css et html sont modifiables en live et le code de la page que tu voit est celui interprété par le navigateur contrairement au code source qui est le code envoyé au navigateur.
Modifié par gcyrillus (08 Nov 2022 - 00:23)

le jsfiddle ne fonctionne pas sur Safari

Salut !
Dans l'inspecteur, j'ai ces message d'erreur :

[Warning] [blocked] The page index.html was not allowed to run insecure content from  http://code.jquery.com/jquery-latest.js.
 

[Error] Failed to load resource: the server responded with a status of 404 () (levres.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcsex.webm, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcdrug.webm, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcrock.webm, line 0)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Log] 0 (index.html, line 1064)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Log] 1 (index.html, line 1064)
> Élément sélectionné
< <video autoplay loop muted playsinline>…</video>
[Error] Failed to load resource: the server responded with a status of 404 () (lddcsex.webm, line 0)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Log] 2 (index.html, line 1064)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcdrug.webm, line 0)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcrock.webm, line 0)

[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcsex.webm, line 0)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcdrug.webm, line 0)

[Error] Failed to load resource: the server responded with a status of 404 () (lddcdrug.webm, line 0)
[Error] ReferenceError: Can't find variable: slitslider
	onAfterChange (index.html:881)
	_onEndNavigate (jquery.slitslider.js:399)
	(fonction anonyme) (jquery.slitslider.js:327)
	dispatch (jquery.min.js:3:8442)
	(fonction anonyme) (jquery.min.js:3:5145)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcrock.webm, line 0)

Et j'ai reçu ce message du forum SAFARI :
I am unclear on what a “static animation” is. That seems rather more like a static image, or static HTML/CSS/JavaScript.

If you are not developing the animation—this was posted in an area frequented by third-party app developers—I can ask that this question be moved to a macOS forum for whichever version of macOS you are using here. Which macOS are you using? Ventura? Monterey? Something older?

If this isn’t your own animation but something hosted at some website that you are visiting, then it is distinctly possible the content isn’t rendering correctly, and you’ll either need to start to debug this and then discuss this with the website maintainer, and/or with Apple.

If you are developing this animation—you had referred to “my animation” in your posting, and posted in a developer-focused area—then check whether the Safari web inspector is reporting JavaScript or CSS animation errors, update the Mac involved to Ventura to get the latest version of Safari, check for updates to your particular JavaScript and/or CSS animation tooling—whatever tooling you’re using to generate these animations, and whether the tooling supports Safari—and then check with the WebKit folks.

Je suis un poil perdu
Merci et bonne journée,
P.

Bizarre ces fichiers de site ... X?

[Warning] [blocked] The page index.html was not allowed to run insecure content from   http://code.jquery.com/jquery-latest.js.
 
[Error] Failed to load resource: the server responded with a status of 404 () (levres.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcsex.webm, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcdrug.webm, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (lddcrock.webm, line 0)

sont-ils les tiens ? Rien à voir avec le fiddle non plus ...

pour http://code.jquery.com/jquery-latest.js , manque le s derrière http

Je passe mon tour, sinon il y a d'autres techno pour tes animation avec de si grosses lettres animées : canvas, SVG , voir gif animé ou vidéo.

ex: SVG https://jsfiddle.net/5entL2dh/1/
ex: canvas https://jsfiddle.net/nd9L52vu/
ex CSS translate() https://jsfiddle.net/ev786rck/

Pour le message en anglais, tu n'as pas poster dans le bon forum ni la bonne catégorie. Si ton niveau d'anglais + compétences en WEB (sans ou avec traducteur en ligne) sont pour le moment trop légères, reste sur des ressources et forums francophones (ou autre langue que tu maitrises suffisamment) pour le moment , pense éventuellement aussi a suivre une formation sérieuse si tu n'arrives pas seul à le faire, les forums ont leur limites.

Cdt
Modifié par gcyrillus (08 Nov 2022 - 18:03)

@ PLGPPUR
et puis, il faut dormir la nuit, ça repose et porte conseil

X ? Pas du tout. Rock ! Sex, Drug & Rock'n Roll avec un webm pour illustrer chaque mot. Rien de très chaud
Merci beaucoup pour ton aide gcyrillus, il est vrai que j'ai été "gourmand" jusqu'à très tard Bongota.
Encore merci pour tout
P.