Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome

See original GitHub issue

short description of the bug / issue, provide more detail below.

The fonts looks like this in latest Chrome with Slick Slider’s .js file uncommented in my HTML:

slicker-slider-off

However if I re-activate slick slider the subpixel rendering just gone in Chrome:

slicker-slider-on

`https://jsfiddle.net/Lanti/pnkogaLz/29/`

`https://jsfiddle.net/Lanti/pnkogaLz/30/`

Steps to reproduce the problem

Make a screenshot from the following Fiddle example in Chrome latest: https://jsfiddle.net/Lanti/pnkogaLz/29/
Insert in Photoshop, zoom in to see pixels.
The subpixel rendering (chromatic abberation around the characters) is gone, when Slick Slider is enabled!
Uncomment the slick slider’s init code and the subpixel rendering back again: https://jsfiddle.net/Lanti/pnkogaLz/30/

Needs to be fixed ASAP!!! This causing blurry, bolder text in Chrome.

Can it be an issue in slick.min.css?

UPDATE:

This is happens to be the case when: a.) Slick slider used with default slick.min.css, no own styling for the slider, as seen at https://jsfiddle.net/Lanti/pnkogaLz/29/. b.) Slick slider used with my own styling (flexbox layout), but using a <div class="container"> after the <body> tag with the following CSS:

.container {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}

So, the bug is only presented when either you use with the default CSS or having slick slider in a flexbox layout. Both cases the subpixel font rendering turned off on the entire site in Chrome.

More Details

Which browsers/versions does it happen on?

Chrome 50.0.2661.87 m 64bit

Which jQuery/Slick version are you using?

Jquery 3.0.0-Beta1 Slick Slider 1.5.9

Did this work before?

No, Slick Slider always causing this!

Issue Analytics

State:
Created 7 years ago
Comments:9

Top GitHub Comments

7reactions

DJviolincommented, Apr 24, 2016

Seems like useTransform: false solves the issue. Turning this off causing any side effects in slick’s operation?

$('.sidescroll .images').slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 20, // Set at least half of all slides
  centerMode: true,
  initialSlide: 0, // Fix for centerMode with 1
  variableWidth: true,

  arrows: true,
  draggable: true,
  swipeToSlide: true,
  slidesToScroll: 1,
  autoplay: false,
  autoplaySpeed: 3000,

  useTransform: false
});

I experiencing performance drop in rotation with this solution.

4reactions

simeydotmecommented, Apr 24, 2016

Thanks for finding an interesting CSS quirk in Chrome…

it’s caused by the browser splitting layers out to the GPU for 3d transforms… https://jsfiddle.net/bkf18379/

some people say -webkit-font-smoothing: antialiased; will help, it doesnt for me. http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition

I think you’ll find all sliders will cause this, unless they avoid any transforms and use the left properties. You can try to edit the CSS of slick so that there’s no transforms.

Best, Simon

Top Results From Across the Web

409486 - subpixel font rendering causes poor ... - Monorail

I noticed that some small fonts look different, worse in my opinion, than before. I tracked down the range, but it doesn't have...

javascript - Difficult and Miscellaneous Diseases: Exploration of the ...

The text or border in an area becomes particularly blurred when displayed, ... Serious bug: Slick Slider turns off subpixel font rendering on...

Slick slider messing with font in complete different location on ...

Very weird situation. When my slick slider goes to the next / previous image one 3-column block with red titles in them the...

521364 - Transformed text at fractional offsets is very blurry ...

(was: Composited text at fractional pixel offsets has blurry rasterization.) ... will turn off subpixel font rendering on the entire site in Chrome:...

Web Fonts Collateral Damage of Ad Blockers - Hacker News

And all these pages with long of nothing because their Njdxjdfj font ... text like trash when I had font anti-aliasing/sub-pixel rendering ......