Hi community!
Today we have encountered a very strange behaviour on one of our landing pages.
For reference, this is the published page: https://triathlon.vation.io/
My colleague and I both encounter the following behaviour:
The text loads (four bullet points) in the correct format. VEEEERY briefly you see it as Times New Roman before, but I believe this is just your browser showing you the text before the fonts are loaded.
This is all fine.
Some very few milliseconds after the correct font has been applied (Montserrat in this case),
the first of the four bullet points kind of “condenses”. The correct term should be “kerning”.
This results in different formats for the bullet points. We used the “inspect” function in Chrome and detected, that for whatever reason, that the element.style contains two “transform” options.
If you delete them in Chrome, the format is shown in the intended way. Please refer to the following two screenshots (or reproduce this behaviour in your browser):
So the question remains: how do we solve this issue. While we do use some javascripts and CSS on the webpage, none of them refer to the text boxes. Or at least, we believe so. Here is the CSS:
<style type="text/css">
#lp-pom-root .lp-pom-text a:link {text-decoration: none}
#lp-pom-root .lp-pom-text a:visited {text-decoration: none}
#lp-pom-root .lp-pom-text a:active {text-decoration: none}
#lp-pom-root .lp-pom-text a:hover {text-decoration: none}
.shadow-effect {
background: #fff;
padding: 20px;
border-radius: 4px;
text-align: center;
border: 1px solid #ECECEC;
box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
#testimonials-list .shadow-effect p {
font-family: Montserrat;
font-size: 15px;
color: #1A1A1A;
line-height: 1.5;
margin: 0 0 17px 0;
font-weight: 300;
}
.testimonial-name {
margin: -17px auto 0;
display: table;
width: auto;
font-family: Montserrat;
font-size: 17px;
background: #1A1A1A;
opacity: 0.6;
padding: 9px 35px;
border-radius: 12px;
text-align: center;
color: #fff;
font-weight: 600;
box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}
#testimonials-list .item {
text-align: center;
font-size: 24px;
padding: 50px;
margin-bottom: 80px;
opacity: .2;
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
transition: all 0.3s ease-in-out;
}
#testimonials-list .owl-item.active.center .item {
opacity: 1;
-webkit-transform: scale3d(1.0, 1.0, 1);
transform: scale3d(1.0, 1.0, 1);
}
.owl-carousel .owl-item img {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
max-width: 90px;
border-radius: 50%;
margin: 0 auto 17px;
}
#testimonials-list.owl-carousel .owl-dots .owl-dot.active span,
#testimonials-list.owl-carousel .owl-dots .owl-dot:hover span {
background: #1A1A1A;
-webkit-transform: translate3d(0px, -50%, 0px) scale(0.7);
transform: translate3d(0px, -50%, 0px) scale(0.7);
}
#testimonials-list.owl-carousel .owl-dots {
display: inline-block;
width: 100%;
text-align: center;
}
#testimonials-list.owl-carousel .owl-dots .owl-dot {
display: inline-block;
}
#testimonials-list.owl-carousel .owl-dots .owl-dot span {
background: #1A1A1A;
display: inline-block;
height: 20px;
margin: 0 2px 5px;
-webkit-transform: translate3d(0px, -50%, 0px) scale(0.3);
transform: translate3d(0px, -50%, 0px) scale(0.3);
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
transition: all 250ms ease-out 0s;
width: 20px;
}
</style>
I have found one workaround, which - interestingly - worked for a short time:
In the text box preferences I switched to “heading 6” from “paragraph”.
This solved the issue temporarily, but now it has reappeared.
Does anyone have an idea what we are doing wrong or what is even going on? 🙂
Thank you very much in advance!