Bootstrap Carousel affects all fonts on change slide

Question

I'm using Bootstrap Carousel on my web. I find small but so annoying issue. Everytime if carousel change slide, all fonts on web get for one second a bit thicker. And this repeats with every new slide.

I get this issue on more than one website. Have you ever seen that? Any solution?

Could you provide some screenshots? Also, does this affect multiple browsers? — meskobalazs, Jan 09 '15 at 08:24
http://screenshot.cz/MPMRB/ this is screenshot to compare two weight of fonts. Thicker is only on new slider change, so it becomes visible only for one second maybe. But it is so annoying if it shows on every change! — Dominik Vávra, Jan 09 '15 at 08:25
At first guess, I would assume this is a Webkit thing. Have you tested it in other browsers? (e.g. Firefox or IE) I made an answer assuming this is the case, if not, I will delete it. — meskobalazs, Jan 09 '15 at 08:49

meskobalazs · Accepted Answer · 2015-01-09T08:58:40.277

5

The reason for the flickering is the GPU acceleration of the Webkit engine. The animation changes the font-rendering mode of the browser. You could try to use this CSS style to fix this:

-webkit-font-smoothing: subpixel-antialiased

Also, it may be possible that some hacking is also required with the z-index property, I read that the animated text should have the highest z value on the page - though you should not care for this, if the font smoothing solved it.

edited Jan 09 '15 at 08:58

answered Jan 09 '15 at 08:53

meskobalazs

15,741
2
40
63

this didn't work for me, but -webkit-font-smoothing: antialiased; did the trick! – Fortes Oct 20 '15 at 01:18

score 0 · Answer 2 · answered Feb 29 '16 at 17:08

0

I tried removing this from the body style in my CSS:

text-rendering: geometricPrecision;

This worked for me.

answered Feb 29 '16 at 17:08

Mark Lanham

1

Shwe Yee Tun · Answer 3 · 2016-07-04T05:57:42.727

0

Create class in style.css not to inherited from another. For example.

body{ font-family:"Arial"; }

p{ font-family:"Arial"; }

This work for me.

Another way is " Try another font" instand of font you've used.

edited Jul 04 '16 at 05:57

answered Jul 04 '16 at 04:37

Shwe Yee Tun

1
1

score 0 · Answer 4 · answered Apr 24 '17 at 17:18

All the resources I found on stackoverflow still leave a blurriness as a side-effect on fonts and images. So my solution was to use the Bootstrap Carousel without the class "slide" as class="carousel" only - thus there won't be slide transition, the image will change completely from on to another, but on my point of view is better instead of affecting the entire website.

Change From:

<div id="carousel" class="carousel slide" data-ride="carousel">

To:

<div id="carousel" class="carousel" data-ride="carousel">

Bootstrap Carousel affects all fonts on change slide

4 Answers4

Linked