Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

problems with safari on ipad

I am using Isotope for a portfolio website. I use the filtering function to reveal extra information about each specific image shown on the homepage (I changed filters from an id to a class to do this). Effectively its one page of html. Problems - it crashes on my ipad3 retina. I removed webkit transitions and added some js below to replace scrollTop to get these functions to work on safari/chrome. It still crashes but works in these browsers on my mac. shame to loose the transitions!

testsite:

pgod.businesscatalyst.com

I am no java expert/intermediate html/css so any help with optimising this site for all browsers/devices and keeping transitions welcome. If this is a longer task than I imagine, do say, I will raise the bounty.

User Gravatar

pauloram

Posted Jul 2 2013 20:12 UTC

$25


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
    safari
  • 1925 Views

6 Replies


Hello pauloram,

I've refactored your code, and now the site runs better (according to chrome's inspector). I've tested this on Safari on iPad 2.

You can see the code here: http://pastebin.com/wMTEtJM0

If you're not satisfied with the solution, don't hesitate to contact me.

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jul 2 2013 22:54 UTC

Nikola

wow, thanks for the fast response. I have added your code to my site - please take a look and see if i have done it correctly. Let me know your paypal account.

so I now have nice transitions in chrome, safari and firefox, the scroll to top works.

I have an iPad3 retina and it is crashing still on that. Any ideas on whats causing this? Ive emptied cache, rebooted, etc, still no joy.

On a general note would it be better if i split the content over various pages rather than just call up what i need with classes - I need to add the images (now large red boxes) for each project. These are currently background images. Do you think that is ok. You dont need to do any more work in this respect, advice would be enough.

many thanks

Paul Oram

User Gravatar

pauloram

Posted Jul 2 2013 23:20 UTC

I don't have iPad 3 retina right now, but I will debug on it tomorrow.

On a general note would it be better if i split the content over various pages rather than just call up what i need with classes - I need to add the images (now large red boxes) for each project. These are currently background images. Do you think that is ok. You dont need to do any more work in this respect, advice would be enough.

It will be better if you split the content, because when you add all those images in one page, the load time will be very high.

User Gravatar

NBoychev

Posted Jul 3 2013 0:09 UTC

ok, I will let you debug tomorrow. thx

User Gravatar

pauloram

Posted Jul 3 2013 0:19 UTC

Hi Paul, Now I've tested on iPad 3 Retina and found the problem. iPad Retina crashes, because there are too many images, that need's to be resized to match the retina resolution. It will not crash on iPhone retina, because iPhone\'s display have much less pixels.

To test this, just replace

background-image: url(../_images/580.png);

with

background:red;

(this applies for all css declarations in main.css -- http://pastebin.com/QuR2geKj).

So this point to my last comment, where I've suggested you to divide the content into multiple pages.

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Jul 3 2013 13:24 UTC

Solution

This didn't solve your task? Get your own custom solution.

Thanks Nikola. I thought that was the case. I am busy splitting the content into multiple pages now. Brilliant service, i will be back no doubt.

Paul Oram

User Gravatar

pauloram

Posted Jul 3 2013 13:29 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions