I noticed that some of my web pages on the Clarity recordings are stripped down to bare bones with only the formatted text left.
Whereas some of the recordings show background colour, navigation, PayPal buttons - the lot.
Is this due to the punters' browsers, phones, settings?
Or is it something I've left out?
I noticed the Apple/iOS reproduced my site better than anything else.
Related
My Tumblr page does not load new pictures from photoset on some occasions. I have experienced this issue on Safari browser. The page is supposed to work like a blog of pictures that are on a chaos (different width is set for each picture, so that every picture is shown differently). After first X pictures, the website is supposed to load a new one beneath them (same as facebook post are functioning for example). This works fine on most devices and browsers, but recently it has stopped working on Safari on iPhones (but only at some cases, one time it is working, but other time it is not). It does not even show the symbol of loading on the end of the page and basically nothing happens when user scrolls down to the end of the page.
I have tried to search for any hints or information of similar issues that other have, but cant find anything that would help. I have also tried to write to Tumblr support, but no answer there yet.
If any of you have any idea what might cause the problem, please, try to answer!
This is really weird behavior. Having difficulty even quantifying. Have had to revise a few times.
Best I can do is the following:
The tech stack for my app is Backbone Marionette, handlebars.js, require.js.
The app contains images mostly of icon size - say 32x32 and under. Some jpg, some png, some svg.
Some of the images, the same ones each time, don't display. That's a common issue on which many have posted. No big news there.
But if I hit the sleep button, leave the iPad sit for a minute or two until the unit really goes into hibernate mode, and then revive it, the images slowly and magically fade in. They don't abruptly display when the screen lights. They fade in afterward.
Doesn't work to just hit the sleep button and instantly revive. Have to wait a minute until it truly hibernates.
After true hibernation, no matter how many times I refresh the page, the images are there. But, if I go and clear the cache on Safari and load the page, the images are not there again - until I do that hibernate thing.
All of these images do display without fail in a browser on a PC (all flavors). It's just on the iPad that they don't.
I thought, at first, it was just images I was loading in collection views. It is not. I have a third party HTML5 video player in the app. It has a play button and other controls in svg format. This also exhibits the behavior above.
Once the iPad has hibernated and been revived, the images fade in. Only clearing cache makes them disappear again.
There are no 404 errors when the images don't display (checked in dev console on a MAC). In fact, if I just tap the screen where the video play button is supposed to display, the player begins. So the button seems to actually be there, just not painted on the screen - until you do that hibernate thing.
Some images in the app always load no matter what. I'm looking at those images to see if I can note anything special about them or the code which renders them.
I tend to think it's not the images themselves because the very same images in a plain web page always display on the iPad. Also, that third party video player in a plain web page displays the svg play button and controls without fail on the iPad.
It's just in my app that the behavior occurs. So it's logical to think my app is where the problem lies. I just can't seem to find a common thread for the images that always work vs ones that don't.
Not sure what code I can even post here. I'll look and see what might make sense to post.
Definitely a problem loading images dynamically via the framework. They are there but do not paint. No idea what the problem actually is. Literally only happens on Safari mobile browser. Can't make it happen anywhere else, even old IE. Know one solution that definitely works though. Preload all the images by explicitly including them in a div in your markup. When you load your marionette app, remove the div - $("#preload-images").remove(). Thereafter the images never fail to paint when added dynamically via marionette.
For some reason when I use Chrome to test out my website, no images load at all, not even tiny ones like loading icons or the simple "back to top of page" arrow icon at the bottom. The browser tab just hangs on the spinning circle loading state. If I refresh it like 10 times or something then a portion of the images might load. Interestingly my Nivo-Slider images never load... there is a large empty space at where the Nivo-Slider gallery should be at the top left of my page no matter how many times I refresh.
The console is completely clean of errors if you check.
Can anyone check for me why my website is not working in Chrome? It works perfectly in Firefox/IE. I admit some images might have large file sizes but it shouldn't cause Chrome to hang for like half an hour?
I'm using latest Chrome/IE/Firefox. Windows 7 64-bit.
My website: www.symphonyofpromise.com/inspiration/en
By the way my website is a completely fictional museum/gallery project, it's not the official site for some museum!
I cannot be 100% certain on this, but judging from the Network panel, you might be loading too many MP3 files at the same time, thus maxing out the number of simultaneous requests. Chrome might use a different prioritization algorithm.
I would recommend removing some of those MP3 files and deferring loading until after the initial load.
EDIT:
Nevermind that, it appears that the MP3s load fine, but other resources are definitely blocking it. A request should never be pending this long. Poke around further in the Network panel and you'll find the problem.
I was looking at the thumbnail image in a Shutterfly rss feed and the link is
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
and this renders out a ~3KB thumbnail, as expected.
I compared it to the link to the image on the actual Shutterfly page, which has the same apparent link:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
But when I click this link, it renders out a ~60KB image.
I've looked at this in Fiddler and Chrome Dev tools and can't see anything different in the requests that would tell the server what size to render. I've even tried copying these links into Firefox to see if it was a browser/cookie type issue but they render differently there too.
I'm driving myself crazy trying to figure out what's going on. Can anyone shed some light on this?
The two websites are different.
Thumbnail:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
Original:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
I opened both links in different tabs in Chrome. Then, flipped back and forth between the two tabs, staring at the URLs. There was a minor flash where the 9 changed to a 5, and vice versa.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari