clip-path & backdrop-filter sur Firefox

Version imprimable

28/11/2021, 15h33
Anton-s44

1 pièce(s) jointe(s)

clip-path & backdrop-filter sur Firefox

Bonjour tout le monde,

Sur Firefox, j'ai essayé de faire un hexagone (balise div avec la propriété clip-path). Le body ayant un background-image, j'ai voulu faire un effet sur cette image grâce à la propriété backdrop-filter.
Le résultat est que ce n'est pas l'hexagone qui prend comme propriété le backdrop-filter, mais le div entier, sans tenir compte du clip-path.
Je suis bien allé dans about:config et j'ai indiqué True comme valeur de layout.css.backdrop-filter.enabled et gfx.webrender.all comme on peux le voir sur le web mais rien n'y fait.
Sur un autre navigateur (Chrome, Edge ...), l'effet fonctionne parfaitement !

Avec-vous des suggestions pour résoudre mon problème ?
Pièce jointe 609353

Merci à vous !
28/11/2021, 15h47
jreaux62

Bonjour,

oui : montre ton code.

Erratum ...

Bien sûr !

Code:

1
2
3
<body>
	<div id="hex"></div>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
	background-image: url('http://www.littlewoolshop.com/blog/wp-content/uploads/sites/8120/2021/07/josiah-farrow-lpxf698eF6s-unsplash.jpg');
	width: 100vw;
	height: 100vh;
	background-size: cover;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
#hex {
	width: 200px;
	height: 175px;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	backdrop-filter: blur(0px);
	background-color: rgba(0,0,0,.3);
}
#hex:hover {
	backdrop-filter: blur(5px);
 
}

28/11/2021, 17h57
NoSmoking

Bonjour,

Citation:

Envoyé par Anton-s44

Sur Firefox, j'ai essayé de faire un hexagone (balise div avec la propriété clip-path). Le body ayant un background-image, j'ai voulu faire un effet sur cette image grâce à la propriété backdrop-filter.

• Regarde la compatibilité : CSS Backdrop Filter.
• A lire également le commentaire sur MDN : Compatibilité des navigateurs.
28/11/2021, 18h13
Anton-s44

Citation:

• Regarde la compatibilité : CSS Backdrop Filter.
• A lire également le commentaire sur MDN : Compatibilité des navigateurs.

Si j'ai bien compris, Firefox ne prends pas en charge cette option, sauf si on indique True aux paramètres "layout.css.backdrop-filter.enabled" et "gfx.webrender.all", et c'est ce que j'ai fait ... sans succès
Après, le backdrop fonctionne, mais sur toute la surface du div et non uniquement la surface du div non rognée par le clip-path ...
29/11/2021, 18h37
NoSmoking
Citation:

Après, le backdrop fonctionne, mais sur toute la surface du div et non uniquement la surface du div non rognée par le clip-path ...

dans ce cas je changerais mon fusil d'épaule et jouerais avec fliter car bien qu’expérimentale elle reste mieux supportée.

Dans ce cas il te faut revoir ta structure et utiliser les % pour positionner l'élément en couche supérieure.
Code:

1 2 3 <div id ="fond"> <div id="hex"></div> </div>
les deux éléments ayant les mêmes background-image, background-size.

Il y a de l'adaptation dans l'air, après cela peut dépendre de ce que tu souhaites faire comme effet ;)
18/12/2021, 18h43
Anton-s44

Désole de ne répondre que maintenant !

La seule façon de faire et allant dans ton sens, est de définir des formes , j'y mettre le background à la même size que le body et de jouer sur la propriété background-position -> fastidieux !

C'était bien ton idée ?

Ce que je voyais été dans ce style, mais en mettant l'image dans le conteneur et non en background pour forcer celui-ci, le conteneur, à occuper une « vraie » place à l'écran.
Code:

1 2 3 4 5 <div id ="fond-image">  <img src="http://www.littlewoolshop.com/blog/wp-content/uploads/sites/8120/2021/07/josiah-farrow-lpxf698eF6s-unsplash.jpg"> <div class="mask-clip-hex"></div> </div>
le seul CSS nécessaire, à ce niveau, est :
Code:

1 2 3 4 5 6 7 #fond-image { position: relative; max-width: 100%; } #fond-image img { width: 100%; }
l'image s'adaptera aux dimension du conteneur en cas de redimensionnement du viewport.

Ceci étant, concernant la définition du « masque hexagonal » je trouve intéressant d'utiliser une évolution majeure du CSS à savoir les variables.

Cela pourrait s'écrire ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 #fond-image .mask-clip-hex { --w: 18.75%; --h: 15%; /*-- largeur fois ratio image 1920/2400 --*/ --x0: 50%; --x1: calc(var(--x0) + var(--w) / 4); --x2: calc(var(--x0) + var(--w) / 4 *3); --x3: calc(var(--x0) + var(--w)); --y0: 17%; --y1: calc(var(--y0) + var(--h) / 2); --y2: calc(var(--y0) + var(--h)); position: absolute; top:0; left:0; bottom:0; right:0; clip-path: polygon(var(--x1) var(--y0), var(--x2) var(--y0), var(--x3) var(--y1), var(--x2) var(--y2), var(--x1) var(--y2), var(--x0) var(--y1)); background-image: url('http://www.littlewoolshop.com/blog/wp-content/uploads/sites/8120/2021/07/josiah-farrow-lpxf698eF6s-unsplash.jpg'); background-size: 100%; }
je ne pense pas qu'il y ait vraiment des choses compliquées ci-dessus.

Le masque occupe la totalité du conteneur, on positionne la zone de clip et on lui mets l'image en background, ainsi au redimensionnement tout suivra.

Il te reste juste à appliquer ton effet :
Code:

1 2 3 #fond-image .mask-clip-hex:hover { filter: blur(15px); }