Owlcarousel2: Blured text problem

[Jhonb]

Hi guys,

I have a little problem using OWL carousel 2. You can see it in action right here:
http://www.serialkreative.be/jhon/index.html

The text of the 2 next news are blured... Any solution?

Thanks a lot,

Jhon

[witrin]

Can't see that here (Chrome 35, Linux). See also #120.

[pnpetroff]

It's also blurred here.

[witrin]

What OS do you use?

[witrin]

Chrome 35, Linux

[pnpetroff]

Hmm, Windows 7 here.

[witrin]

Funny thing ;). What browser do you have tested also?

[Jhonb]

I use the latest version of Chrome & Safari for mac :)

[witrin]

So this is currently Webkit on Windows and Mac?

[pnpetroff]

Hmm, yes it seems so, no problems on FIrefox.

[witrin]

Is this maybe related? http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

[indrasantosa]

It seems the issue is caused by the decimal in translate3d.
Here is the comparison

With decimal in translate3d:

Without decimal in translate3d:

[witrin]

Thanks for the hint!

[pnpetroff]

Great discovery! Will there be soon fix for this?

[indrasantosa]

Glad to help! :)

[apsolut]

In v1 version i could fix it with -webkit-transform: translate3d(0,0,0); , but right with v2, its still blured.
Checked decimal, and fixed mine scenario with margin: 12, (it was 10) so there are round numbers..
Maybe this can be someone fixed with relative and translate3d 0,0,0... not shure..

[witrin]

@apsolut What do you mean with relative?

What problems would we get by rounding floatings?

[apsolut]

@indrasantosa "decimal in translate3d" thats how i fixed mine, my slides have the same width.. so for me his idea is working..

@witrin Rouding floatings, im tired.. :confused: relative:position... ignore me, need to test it more.

[indrasantosa]

@apsolut Sorry, I don't really get the point, if you can share some links, maybe I can figure it out more

[witrin]

@apsolut What do you mean you're tired regarding to the approach by making values like 234.5 to 234 or 235?

[apsolut]

Sorry guys, was tired from work (12hours in row).. its morning here now,
http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css
I tried to add relative to parent element, add scale and zoom:1 but it was mistake, i thinked i fixed it but.. = it look like Firefox can render HalfPixel, that was all.. in chrome cant get it work with half-pixel..

@indrasantosa mentioned you because your solution to remove half pixel worked for me, i fixed it with editing my margin settings from 10 to 12 .owlCarousel({ margin: 12 });

it will work whatever it is 234 or 235 but just if there is no half-pixel..

maybe to use math() to make round numbers...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

@witrin @indrasantosa sorry one more time, and thanks for that half stuff :+1:

[witrin]

@apsolut No problem ;)! How to round a number is not the question I think. But what should we take in such case the nearest greater or smaler?

[indrasantosa]

@apsolut No problem :) Glad to help.

@witrin I agree, the problem is how to decide whether to get it into the greater and smaller, but when I play around with the 0.5px thing, I can't really differentiate a 0.5 pixel with my eye. So I think it's OK to just to round it anyhow. Just my 2 cents.

[apsolut]

If my brain isnt sleeping Greater will affect first slide from the left (after transition is done)
http://new.tinygrab.com/565cd0a1fb3cd5ae798c638bbca73cc504fb04b052.png
I agree with @indrasantosa cant see that 0.5px, only if (2% cases) im missing .5px of letter.. .

[indrasantosa]

Hi @OwlFonk, Nah thats OK, :) But I try to read the article and it gives me this link
http://tylertate.github.io/subpixel-rounding/examples/four/four.html
And I think what is shown when I open it is already different with the example they screen shot from the page. It is all already rounded correctly.

But I understand your point that it can be seen on the edge, good point.
Let me explore more on the code :)

[witrin]

Please discuss a possible solution also at #224. I'm not a fan of this approach but what's your opinion?

[shur]

Just duplicate my comment here:

I see the script has lots of problems attributed to pixel decimal values for column width.

I got an idea that probably it's better to use only integer values for column size due to minor changes in margin value. 1-2 pixel changes in margin values won't be noticed, in contrast to the real problems that appear when subpixel are used, e.g. blurred fonts, cut borders, etc.

It took a while to search for some column calculators, but none of them reveal their algorithm.
http://gridcalculator.dk/#/800/4/25/0
http://gridulator.com/

So I made my own column calculator in excel - it's has a simple and clear algorithm:

As you can see, this calculator always retrieves integer value for column width. To achieve that the margin sometimes gets minimal changes.

I'm not sure how to integrate that in this script, and share it as it is. Probably the script author or somebody more skilled would find the idea useful and could implement it.
https://dl.dropboxusercontent.com/u/7715978/column%20calculator.zip

Don't hesitate to ask me if you have any questions.

[witrin]

@shur Unfortunately this won't work in all cases, e.g.:

• Container: 811
• Columns: 11
• Margin: 0

In this case we get a margin of 3. So beside all cases where no margin this would be a possible solution and easy to implement. Maybe we offer this as a option?

[HitArrowLegend]

I got it working by adding .toFixed(0) there :

file is owl.carrousel.js and the line is, you know which one ;)

[witrin]

@HitArrowLegend I'm afraid this brings another bugs. E.g. when you have uneven columns.

[HitArrowLegend]

Well, I didn't tried with something more than an image slider but in my case, it's working fine :s

[pixedelic]

You could consider to add this fix as an option, so it would be available only if necessary and removable in particular conditions... Personally I added the workaround by @HitArrowLegend to my project... so thank you man :-)

[witrin]

@pixedelic Yeah I think this would be the only possibility for this bug. In fact there are several fixes available which are working not for all cases. But I'm currently not sure how to integrate them in a good way.

[henryklh]

try to make the margin to 9px. most of the time 9 is the most clear but you also can adjust the margin setting in the responsive if you have time to test what margin make the text more clear

$('.latest-owl-carousel').owlCarousel({
loop: true,
center:k > 6,
nav: false,
dots: true,
margin: 9,
items:4,
responsiveClass: true,
responsive: {
0: {
center:true,
items: 2,
nav: false,
dots: false,
margin: 9
},
600: {
items: 4,
nav: false,
margin: 9
},
1000: {
items: 6,
nav: false,
margin: 9
}
}
})

[oskolsky]

transform: 'translate3d(' + Math.round(coordinate) + 'px' + ',0px, 0px)',

[zandergrin]

@oskolsky - that seems to work replacing line 996 of the js

[tomaszbujnowicz]

An easy fix that worked for me.

Find .owl-carousel .owl-item in the stylesheet and add
-webkit-perspective: 1000;

It did the trick. It's a standard fix for translate3d(), scale() and any other css3 transform animations.

[oskolsky]

@tomaszbujnowicz good decision, no need to patch js

[Anydog]

yeah ... great carousel but that blur is a killer ...
I found out that -webkit-perspective: 1000px doesn't work for me, text is still blurred ...
The @HitArrowLegend solution with toFixed(0) is working, but I believe, with some performance loss.

Any how the translate3d(-1373.665 px, 0px, 0px); in my browser (Chrome / Win 8.1 - which I believe is very common combination ) is now translate3d(-1373 px, 0px, 0px); and it's ok.

Something to fix ... Maybe somewhere sooner in code to apply toFixed(0) to coordinate var.

Cheers

[hanserino]

I have the same problem. -webkit-perspective: 1000; didn't do it for me.

[hanserino]

It may be a small hack, but I fixed it by going in to owl.carousel.js and changed translate3d to translate.

transform: 'translate(' + coordinate + 'px' + ',0px)'
instead of..
transform: 'translate3d(' + coordinate + 'px' + ',0px, 0px)'

[adelwafa]

@eplehans U R Amazing, About 18 Hour Looking For A solution for these problem and finally ur solution saved my tomorrow, Thank u bro.

[matheusazzi]

Isn't there a fix for it yet? As I see Math.round(coordinate) is the best solution while?

[godzik]

maybe it sounds funny, but removing 'center: true' option worked in my case :D

[morteza-gho]

Hi, use margin to solve this problem. It worked for me.

[wbruno]

it's solved at v2.1.1

[jack-fdrv]

Where we can get 2.1.1?

[jack-fdrv]

It may be a small hack, but I fixed it by going in to owl.carousel.js and changed translate3d to translate.

transform: 'translate(' + coordinate + 'px' + ',0px)'
instead of..
transform: 'translate3d(' + coordinate + 'px' + ',0px, 0px)'

• it works but now it jumping.

[jack-fdrv]

transform: 'translate3d(' + Math.round(coordinate) + 'px' + ',0px, 0px)',
works perfect, thnx

[rivarchi9]

Hi! The problem has been solved when I deleted the feature webkit-backface-visibility: hidden; in file owl.carousel.css. And raplace transform: 'translate3d(' + coordinate + 'px' + ',0px, 0px)' on transform: 'translate(' + coordinate + 'px' + ',0px)' to file owl.carousel.js. I think lots of people have problem with it.

[stribJamieHutt]

@rivarchi9 your solution worked brilliantly. Saved my butt this morning.

[andreich1980]

I use "owl.carousel": "^2.2.0" and still have the problem, not with text but with images (they look pixilated).
Thanks, @rivarchi9