• Registered: 2012-08-13
  • Posts: 7

Topic: Text on iPad flickers lighter on slide transition

I have a problem that occurs with column of text in it's own <div> on a webpage - when you slide the picture to the next image, the text in the div flickers slightly lighter and thinner - it looks as if the text aliasing is momentarily being turned off as the transition takes place.

This is more noticeable on white out text of a dark colour.

Is this an issue with the Safari browser or is there a workaround? I have played around with the z-index and done a test with no java script etc on the page but this still occurs.

On an iPhone it doesn't happen, nor in desktop browsers.

Hope you can help!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

Is this an issue with the Safari browser or is there a workaround?

If it was an issue with Mobile Safari, I would expect to see the issue on both the iPad and the iPhone but you say that it happens on the iPad but not on the iPhone.

Please post the URL to your gallery so that I can take a look.

3 Reply by captureme (edited by captureme 2012-08-16 20:09:38)

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

I have the same problem with my footer text on an iPad 1st generation, I did not notice it on the later iPad models or any other browser.

Steven this sounds like the issue I mentioned to you a couple of month ago, that your colleague could not replicate.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

@captureme

It does sound similar but without a gallery URL from contactgeoff, there is little we can do to test.

  • Registered: 2012-08-16
  • Posts: 4

Re: Text on iPad flickers lighter on slide transition

+1 for me on iPad 1. Looks like it could be the aliasing as my logo beside the text appears to have jaggies as well as text flicker.
I will send the link for the gallery to you to in a PM (this is for our private proposals/pitches so don't want to post the link on a public forum) if you'd like.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

@redwings

Please check you email. I have sent you a message.
Thank you.

  • Registered: 2012-08-16
  • Posts: 4

Re: Text on iPad flickers lighter on slide transition

Just replied with a link to the gallery.

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

I would like to know about this as well, especially since your colleague was not able to replicate what I am seeing with the gallery link I provided to you month ago.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

@captureme

The problem redwings is having (regarding flickering text) may be unrelated to your original problem as the text redwings refers to is the Gallery Title text (and may have something do do with the fact that @font-face is being used) rather than non-gallery-related text elsewhere on the page.

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

@ Steven

Yes my problem is outside the gallery in another <div>.  Did you get a gallery link from contactgeoff?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

No. contactgeoff has not yet replied.

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

I just noticed that the flicker only occurs in Landscape view maybe you can ask your colleague to recheck.

When I first reported the flickering my navigation menu and my footer was affected.
Now only my footer is flickering on image load/transition, my menu is no longer flickering.

Browse through any of my galleries on an iPad 1 in landscape view and the footer should be flickering on every image load/transition.

Thanks

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

When I first reported the flickering my navigation menu and my footer was affected.
Now only my footer is flickering on image load/transition, my menu is no longer flickering.

Something must have happened to initiate this change in behavior.
Did you change any code, did you upgrade your Mobile Safari/iOS version, has something changed on your web server?

Browse through any of my galleries on an iPad 1 in landscape view and the footer should be flickering on every image load/transition.

Please post a URL to such a gallery so that I know I am definitely looking at a gallery which exhibits this behavior on your iPad. Thank you.

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

Something must have happened to initiate this change in behavior.

I know

did you upgrade your Mobile Safari/iOS version

NO

has something changed on your web server

Yes I changed my server but this is not the problem I just confirmed it.

Did you change any code

Yes I changed a lot in my html code and my css

But here is a version were I have removed simpleviewer and other scripts to show that it is only related to  juicebox coding. I also included a juicebox gallery title

The problem redwings is having (regarding flickering text) may be unrelated to your original problem as the text redwings refers to is the Gallery Title text (and may have something do do with the fact that @font-face is being used) rather than non-gallery-related text elsewhere on the page.

And yes it also flickers and no I do not use font-face.
http://www.marcopietschmann.com/steven#21

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

Do you have a minimal example which does not load your external CSS? The less code on the page to start with, the less we have to eliminate as a possible cause for the problem.
The CSS contains very generalized code and applies certain CSS rules to all div, p, h1 and h2 elements on the page (including those in the gallery).
The CSS may not be the cause of the problem but if it is not there to start with, then we do not need to wonder whether or not it is somehow conflicting with the gallery.

16 Reply by captureme (edited by captureme 2012-09-07 14:41:00)

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

I apologize but this is the css I am using and need for my website as I tried to explain the gallery you are looking at is a striped down version of what I actually use.

I believe that there is a conflict between my css and juicebox, I believe I also tested your sample galleries month ago and I did not notice any flickering- so what else could it be?

Can you confirm now that you also see a flickering?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

Can you confirm now that you also see a flickering?

Yes. My colleague has been able to see the flickering on an iPad 1 and this has now been logged as a bug.

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Text on iPad flickers lighter on slide transition

This issue is caused by the use of webkit hardware accelerated transforms for the image transition animations. On the iPad 1 this causes the text to temporarily become slightly less bold during the transition. Unfortunately this appears to be a low-level hardware issue on the iPad 1 and as such there is not a good solution that we are aware of.

  • Registered: 2012-05-31
  • Posts: 60

Re: Text on iPad flickers lighter on slide transition

Thanks Felix for the update - interesting explanation - it just amazes me why this only occurs in landscape view.
I am not certain but this gallery does not flicker http://juicebox.net/demos/lite/embedded/.
If it would I would not have looked for a conflict with my css   - but maybe I checked in portrait view, I will let you know.

  • Registered: 2012-08-13
  • Posts: 7

Re: Text on iPad flickers lighter on slide transition

A thousand apologies - I didn't set up an alert for when replies were posted. As I was on a deadline to get our site up and running I went with the issue as it's not a make or break issue.

This is on an iPad 2 and only effects text in a DIV external to the Juicebox container DIV

The link is http://www.johnandornadesigns.co.uk/htm … allery.htm

It may be my poor implementation!

Thanks anyway for all the feedback and your help Steven in looking into the issue. (I have now subscribed to the topic).

Best wishes,

Geoff

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Text on iPad flickers lighter on slide transition

@contactgeoff

I notice that your gallery uses Juicebox-Pro v1.1.1. Please try upgrading to the current version (v1.2.0) to see if this makes a difference.
Please see the Upgrading Juicebox page for details.

  • Registered: 2012-08-13
  • Posts: 7

Re: Text on iPad flickers lighter on slide transition

Will do. Thanks again Steven.
Best wishes,
Geoff