Firefox Specific CSS

Author Posts

andrewpeters

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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.