andrewpeters
December 3, 2019 at 8:01 pm
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
December 3, 2019 at 8:02 pm
Sorry. Link would be ghp.thereachco.dev
Please forgive some of this site. The client has already undone a ton. :/
Sebastian
December 4, 2019 at 12:04 pm
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,
