New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blurry text with "-webkit-transform: translate3d (0,0,0)" #45

Closed
Wu4m4n opened this Issue Jan 22, 2013 · 12 comments

Comments

Projects
None yet
8 participants
@Wu4m4n

Wu4m4n commented Jan 22, 2013

Hello,
When I try to create a new slide, from an Ajax request.

The ajax returns me all the html content of a section (only the contents of the body)

success: function (data) {
vertical.createSlide newSlide = var (data);
newSlide.append ();
vertical.swipeTo (newSlide.index ());

The text is blurred.

blurry
blurry2

searching I found that this is a common problem when using
-webkit-transform: translate3d (0,0,0);
That is why the following line comment
. swiper-slide {
float: left;
/ *-webkit-transform: translate3d (0,0,0) * /

and now the text is displayed normally.

normal
normal2

I mention this as something you could consider.

related:
http://code.google.com/p/chromium/issues/detail?id=83475
http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

Greetings!.

@nolimits4web

This comment has been minimized.

Show comment
Hide comment
@nolimits4web

nolimits4web Jan 23, 2013

Owner

Yes, but removing this line of code is not a best idea because anyway it will set back (with inline style) right after you touch the slider. The better solutions that should work property is simple z-index. Try to set to swiper-container (or to slide) div z-index larger than everything arounds it. This may also help

Owner

nolimits4web commented Jan 23, 2013

Yes, but removing this line of code is not a best idea because anyway it will set back (with inline style) right after you touch the slider. The better solutions that should work property is simple z-index. Try to set to swiper-container (or to slide) div z-index larger than everything arounds it. This may also help

@Wu4m4n

This comment has been minimized.

Show comment
Hide comment
@Wu4m4n

Wu4m4n Jan 23, 2013

Hello
Following the same way. with blurry text.

Thanks anyway.

Greetings.

Wu4m4n commented Jan 23, 2013

Hello
Following the same way. with blurry text.

Thanks anyway.

Greetings.

@Wu4m4n Wu4m4n closed this Jan 23, 2013

@nolimits4web

This comment has been minimized.

Show comment
Hide comment
@nolimits4web

nolimits4web Jan 23, 2013

Owner

Ok, will remove this translate prop in update

Owner

nolimits4web commented Jan 23, 2013

Ok, will remove this translate prop in update

@gusrogers

This comment has been minimized.

Show comment
Hide comment
@gusrogers

gusrogers Mar 1, 2014

When using Swiper, I was having the same issue.

In Chrome, all texts under .swiper-wrapper class were getting blurry. Considering that the font I was using was a thin one, the visual aspect was not good at all.

I tried different approaches, such as -webkit-font-smoothing: antialiased, but no success.
Finally I fixed the issue by changing the -webkit-transform property in the javascript file. Basically I replaced the code from using translate3d to use just translate.

In the JS file, I replaced two occurrences of
"translate3d("+f+"px, "+b+"px, "+g+"px)"

To
"translate("+f+"px, "+b+"px)

And then it worked well for me. Of course you have to consider if your animation will use or not 3d effects, which in my case wasn't.

Suggestion: enhance swiper with a new parameter where user can send if they want to use scale3d or just scale.

Just like useCSS3Transforms, there could be a parameter useTranslate3D, default true and uses translate3D(0,0,0) property, but if false will use translate(0,0) instead.

Cheers

gusrogers commented Mar 1, 2014

When using Swiper, I was having the same issue.

In Chrome, all texts under .swiper-wrapper class were getting blurry. Considering that the font I was using was a thin one, the visual aspect was not good at all.

I tried different approaches, such as -webkit-font-smoothing: antialiased, but no success.
Finally I fixed the issue by changing the -webkit-transform property in the javascript file. Basically I replaced the code from using translate3d to use just translate.

In the JS file, I replaced two occurrences of
"translate3d("+f+"px, "+b+"px, "+g+"px)"

To
"translate("+f+"px, "+b+"px)

And then it worked well for me. Of course you have to consider if your animation will use or not 3d effects, which in my case wasn't.

Suggestion: enhance swiper with a new parameter where user can send if they want to use scale3d or just scale.

Just like useCSS3Transforms, there could be a parameter useTranslate3D, default true and uses translate3D(0,0,0) property, but if false will use translate(0,0) instead.

Cheers

@nolimits4web

This comment has been minimized.

Show comment
Hide comment
@nolimits4web

nolimits4web Mar 1, 2014

Owner

Translate3d there is not because of 3d transform, it is required to enable hardware acceleration which hugely increase performance. With using 2d transforms you may have slow performance, especially on mobile devices

Owner

nolimits4web commented Mar 1, 2014

Translate3d there is not because of 3d transform, it is required to enable hardware acceleration which hugely increase performance. With using 2d transforms you may have slow performance, especially on mobile devices

@gusrogers

This comment has been minimized.

Show comment
Hide comment
@gusrogers

gusrogers Mar 1, 2014

Hey nolimits4web,
Do you have any alternatives to fix the issue then? Considering that the text was barely readable in Chrome.

gusrogers commented Mar 1, 2014

Hey nolimits4web,
Do you have any alternatives to fix the issue then? Considering that the text was barely readable in Chrome.

@SebLambla

This comment has been minimized.

Show comment
Hide comment
@SebLambla

SebLambla Jan 15, 2015

I had the same issue here for an horizontal translation (absolute block positioning). I just changed the translateX by a left: 50%; margin-left: {your div width / 2};.

SebLambla commented Jan 15, 2015

I had the same issue here for an horizontal translation (absolute block positioning). I just changed the translateX by a left: 50%; margin-left: {your div width / 2};.

@meelijane

This comment has been minimized.

Show comment
Hide comment
@meelijane

meelijane Jul 9, 2015

screen shot 2015-07-09 at 2 16 39 pm

Can verify - the top section is a swiper slider, see the difference with the text below.

meelijane commented Jul 9, 2015

screen shot 2015-07-09 at 2 16 39 pm

Can verify - the top section is a swiper slider, see the difference with the text below.

@tskweres

This comment has been minimized.

Show comment
Hide comment
@tskweres

tskweres May 26, 2016

was this ever fixed? or a recommended practice found?

tskweres commented May 26, 2016

was this ever fixed? or a recommended practice found?

@mengidd

This comment has been minimized.

Show comment
Hide comment
@mengidd

mengidd Jun 23, 2016

I fixed the blurry text issue by adding the following function to the options object:

onSetTranslate: function(swiper, translate) {
    swiper.container.find('div.slides').css('transform', 'translate(' + translate + 'px, 0)');
}

mengidd commented Jun 23, 2016

I fixed the blurry text issue by adding the following function to the options object:

onSetTranslate: function(swiper, translate) {
    swiper.container.find('div.slides').css('transform', 'translate(' + translate + 'px, 0)');
}
@ronobot

This comment has been minimized.

Show comment
Hide comment
@ronobot

ronobot Jul 19, 2016

+1 to @mengidd’s solution, though where he has 'div.slides', I substituted 'div.swiper-wrapper' (if, like me, you're following the markup structure used in Swiper’s examples).

ronobot commented Jul 19, 2016

+1 to @mengidd’s solution, though where he has 'div.slides', I substituted 'div.swiper-wrapper' (if, like me, you're following the markup structure used in Swiper’s examples).

@lock

This comment has been minimized.

Show comment
Hide comment
@lock

lock bot Jun 26, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock bot commented Jun 26, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot added the outdated label Jun 26, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Jun 26, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.