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:
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.
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
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
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.
ok, I will let you debug tomorrow. thx
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
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
Congratulations!
Now that your task is posted let the world know
Make your task famous