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

DJviolin · 2016-04-24T13:42:54Z

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:

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

`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!

The text was updated successfully, but these errors were encountered:

simeydotme · 2016-04-24T17:41:27Z

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

DJviolin · 2016-04-24T18:33:08Z

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.

DJviolin · 2016-04-24T19:20:05Z

Changing translate3d lines to translate in slick.js solves this:

                if (_.options.vertical === false) {
                    //animProps[_.animType] = 'translate3d(' + targetLeft + 'px, 0px, 0px)';
                    animProps[_.animType] = 'translate(' + targetLeft + 'px, 0px)';
                } else {
                    //animProps[_.animType] = 'translate3d(0px,' + targetLeft + 'px, 0px)';
                    animProps[_.animType] = 'translate(0px,' + targetLeft + 'px)';
                }
                _.$slideTrack.css(animProps);

And:

        if (_.transformsEnabled === false) {
            _.$slideTrack.css(positionProps);
        } else {
            positionProps = {};
            if (_.cssTransitions === false) {
                positionProps[_.animType] = 'translate(' + x + ', ' + y + ')';
                _.$slideTrack.css(positionProps);
            } else {
                //positionProps[_.animType] = 'translate3d(' + x + ', ' + y + ', 0px)';
                positionProps[_.animType] = 'translate(' + x + ', ' + y + ')';
                _.$slideTrack.css(positionProps);
            }
        }

I understand that translate3d is slightly faster than translate, but maybe a custom option with 2D transforms for Webkit browsers, activated with a boolean? Until Chrome will not fix this...

leggomuhgreggo · 2016-04-24T21:40:45Z

Excellent investigative work, gents! It's too bad Chrome has had such a hard time with font rendering.

I feel like since there's already the option to use left by setting useTransform: false, cases where people elect to trade performance for font rendering on chrome is sufficiently satisfied.

There's a lengthy, and fairly active, thread over at the chromium bug tracker. Looks like they're on it, but couldn't hurt to bump it.

DJviolin · 2016-07-15T20:35:19Z

If anyone interested in such solution in the future, I managed to automate the translate3d to translate replacement with gulp and regex:

const paths = {
  vendor: [
    'https://raw.githubusercontent.com/kenwheeler/slick/master/slick/slick.js'
  ]
};

gulp.task('vendor', () => {
  return download(paths.vendor)
    .pipe(gulp.dest('public/vendor'));
});

gulp.task('slick', () => {
  return gulp.src(['public/vendor/slick.js'])
    .pipe(replace(
      /animProps\[_\.animType\] = 'translate3d\(' \+ targetLeft \+ 'px, 0px, 0px\)';/igm,
      'animProps[_.animType] = \'translate(\' + targetLeft + \'px, 0px)\'; // FIX BY DJviolin'
    ))
    .pipe(replace(
      /animProps\[_\.animType\] = 'translate3d\(0px,' \+ targetLeft \+ 'px, 0px\)';/igm,
      'animProps[_.animType] = \'translate(0px,\' + targetLeft + \'px)\'; // FIX BY DJviolin'
    ))
    .pipe(replace(
      /positionProps\[_\.animType\] = 'translate3d\(' \+ x \+ ', ' \+ y \+ ', 0px\)';/igm,
      'positionProps[_.animType] = \'translate(\' + x + \', \' + y + \')\'; // FIX BY DJviolin'
    ))
    .pipe(replace(/mozHidden/igm, 'hidden'))
    .pipe(replace(/mozVisibilityState/igm, 'visibilityState'))
    .pipe(uglify({ output: {quote_style: 1} }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('public/vendor'));
});

gulp.task('vendors', gulp.series('vendor', 'slick'));

leggomuhgreggo · 2016-07-15T21:21:19Z

Neat. Only drag is I think it loses hardware acceleration.

DJviolin · 2016-07-15T21:24:35Z

Yes, it should be noted, sorry. For really lightweight fonts this is the only way until Chrome will finally fix this. But probably it will take years...

If I want to be more specific, I can put the replacement part into an if-else, where only Webkit browsers getting translate (80% of the browsers, so targeting Firefox not worse it).

ktaftaf · 2016-11-21T19:37:35Z

Not necessarily a solution, but I did find a quick fix not mentioned here.

Setting -webkit-font-smoothing: subpixel-antialiased (or desired value); works when toggling it in developer tools, however setting it as a fixed value in css to the slide or content did not work for me.

Specifying an animation that set the aliasing after a set amount of time (should be slide transition time) does seem to work.

.slide-content {
    animation-name: render-fix;
    animation-duration: 0.7s;
}

@keyframes render-fix {
    100% {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

This might not be of help to anyone, and I know this was marked as closed, but I figured I'd share this since it was a quicker fix than some of the more robust solutions above. ¯\_(ツ)_/¯

leggomuhgreggo · 2016-12-03T10:09:33Z

@ktaftaf Im surprised! I thought chrome turned off those browser prefixes.

DJviolin changed the title ~~Serious bug: Slick Slider turns off subpixel font rendering in Chrome~~ Serious bug: Slick Slider turns off subpixel font rendering in Chrome on the entire site Apr 24, 2016

DJviolin changed the title ~~Serious bug: Slick Slider turns off subpixel font rendering in Chrome on the entire site~~ Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome Apr 24, 2016

simeydotme added the Invalid: Not A Bug label Apr 24, 2016

simeydotme closed this as completed Apr 24, 2016

leggomuhgreggo mentioned this issue Sep 23, 2016

Slides become blurry in WebKit browsers because of CSS transform: translate3d(......) #2531

Closed

chokcoco mentioned this issue Jan 20, 2022

疑难杂症：运用 transform 导致文本模糊的现象探究 chokcoco/iCSS#160

Open

chokcoco mentioned this issue Sep 1, 2023

现代 CSS 解决方案：数学函数 Round chokcoco/iCSS#242

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DJviolin commented Apr 24, 2016 •

edited

Loading

simeydotme commented Apr 24, 2016

DJviolin commented Apr 24, 2016 •

edited

Loading

DJviolin commented Apr 24, 2016 •

edited

Loading

leggomuhgreggo commented Apr 24, 2016 •

edited

Loading

DJviolin commented Jul 15, 2016 •

edited

Loading

leggomuhgreggo commented Jul 15, 2016 •

edited

Loading

DJviolin commented Jul 15, 2016 •

edited

Loading

ktaftaf commented Nov 21, 2016

leggomuhgreggo commented Dec 3, 2016

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

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

Comments

DJviolin commented Apr 24, 2016 • edited Loading

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

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

Steps to reproduce the problem

More Details

simeydotme commented Apr 24, 2016

DJviolin commented Apr 24, 2016 • edited Loading

DJviolin commented Apr 24, 2016 • edited Loading

leggomuhgreggo commented Apr 24, 2016 • edited Loading

DJviolin commented Jul 15, 2016 • edited Loading

leggomuhgreggo commented Jul 15, 2016 • edited Loading

DJviolin commented Jul 15, 2016 • edited Loading

ktaftaf commented Nov 21, 2016

leggomuhgreggo commented Dec 3, 2016

DJviolin commented Apr 24, 2016 •

edited

Loading

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

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

DJviolin commented Apr 24, 2016 •

edited

Loading

DJviolin commented Apr 24, 2016 •

edited

Loading

leggomuhgreggo commented Apr 24, 2016 •

edited

Loading

DJviolin commented Jul 15, 2016 •

edited

Loading

leggomuhgreggo commented Jul 15, 2016 •

edited

Loading

DJviolin commented Jul 15, 2016 •

edited

Loading