clip-path & backdrop-filter sur Firefox

**Anton-s44** · 28/11/2021, 15h33

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 ?
Nom : img.jpg
Affichages : 232
Taille : 149,1 Ko

Nom : img.jpg
Affichages : 232
Taille : 149,1 Ko

Merci à vous !

**jreaux62** · 28/11/2021, 15h47

Bonjour,

oui : montre ton code.

**Anton-s44** · 28/11/2021, 17h48

Bien sûr !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
}

**NoSmoking** · 28/11/2021, 17h57

Bonjour,

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.

**Anton-s44** · 28/11/2021, 18h13

• 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 ...

**NoSmoking** · 29/11/2021, 18h37

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Anton-s44** · 18/12/2021, 18h43

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 ?

**NoSmoking** · 20/12/2021, 08h35

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id ="fond-image">
  <!-- l'image force la dimension du conteneur -->
  <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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

clip-path & backdrop-filter sur Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager