Bootstrap Carousel affects all fonts on change slide
I am using Bootstrap Carousel on the web. I find a small but very annoying problem. Every time the carousel changes slide, all the fonts on the Internet get a little fatter within one second . And this is repeated with every new slide.
I am getting this problem on multiple websites. Have you ever seen this? Any solution?
The flickering is caused by the GPU acceleration of the Webkit engine. The animation changes the rendering mode of the browser fonts. You can try using this CSS style to fix it:
-webkit-font-smoothing: subpixel-antialiased
Also, it's possible that using the property z-index
requires some hacking as well, I read that animated text should have the highest z-value on the page - although you shouldn't worry about that if font anti-aliasing solved it.
I tried to remove this from the body style in my CSS:
text-rendering: geometricPrecision;
This worked for me.
Create a class in style.css so you don't inherit from another. For example.
body {font-family: "Arial"; }
p {font-family: "Arial"; }
This job is for me.
Another way is to " Try a different font " that you used.
All the resources I found on stackoverflow still leave blur as a side effect on fonts and images. So my solution was to only use the Bootstrap carousel without the "slide" class as class = "carousel" - this way there will be no slide transition, the image will change completely from one to the other, but better than influencing in my opinion to the entire site.
Edit:
<div id="carousel" class="carousel slide" data-ride="carousel">
To:
<div id="carousel" class="carousel" data-ride="carousel">