Firefox Specific CSS

This topic contains 2 replies, has 2 voices, and was last updated by  Sebastian 1 month, 2 weeks ago.

Author Posts

andrewpeters

Hey guys, here’s a video with my issue:

https://www.loom.com/share/48ef65a20c2e402bab57a6c565a09f24

Having trouble with CSS just on Firefox and not sure how to change it to work correctly.

.background-text .fl-heading-text, 
.infobox-photo-above-title .uabb-infobox-title, 
.uabb-new-ib-title, 
.uabb-face-text-title {
	padding: 0 20px 5px 20px;
	transition: .3s;
	display: inline;
	box-shadow: .5rem 0 0 rgb(255, 255, 255, .7);
	background: rgb(255, 255, 255, .7);
	-webkit-box-decoration-break: clone;
	-ms-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	-box-decoration-break: clone;
}
.background-text .fl-heading-text:hover, 
.infobox-photo-above-title .uabb-infobox-title:hover, 
.uabb-new-ib-title:hover, 
.uabb-face-text-title:hover {
	/* MT [ sub: 1 ] */
	box-shadow: .5rem 0 0 rgb(255, 255, 255);
	background: rgb(255, 255, 255);
}
.uabb-fancy-text-wrap {
	/* MT [ sub: 1 ] */
	padding: 25px 20px 23px 20px;
	transition: .3s;
	display: inline;
	box-shadow: .5rem 0 0 rgb(255, 255, 255, .7);
	background: rgb(255, 255, 255, .7);
	-webkit-box-decoration-break: clone;
	-ms-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	-box-decoration-break: clone;
}

andrewpeters

Sorry. Link would be ghp.thereachco.dev

Please forgive some of this site. The client has already undone a ton. :/


Sebastian

Hey Andrew,

Thanks for sharing the link and providing a video demo.

Firefox fully supports the box-decoration-break property (without the need for a browser prefix). So you need to include that property along with the prefixed properties:

-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
-box-decoration-break: clone;
box-decoration-break: clone;

That should do it. But please let me know if you’re still stuck.

Thanks,
Sebastian

You must login or register to reply to this topic.