Im developing a html5 webApp for iPad and when I open it with Safari, this quit suddenly.
I'm using RoyalSlider plugin and I think the problem may be there since I'm using multiple instances but I don't know which is the specific problem and can´t solve it!
When I just use one instance there is no problem but I really need to use multiple instances of the slider.
Has anyone had similar problem?
When a browser crashes due to rendering content of a web page it is a browser bug. Even if the content is invalid the browser must handle that.
I have no idea about iPod and iPad and iGod stuff, but maybe also on those systems there is the possibility to launch the browser from the command line instead of clicking a button? This is usually the first step to take when trying to find out why some application crashes.
I have experienced crashing issues with iPad Safari and lots of large, hardware accelerated images, particularly on the first generation iPad. From a quick look at the Royal Slider homepage, it looks like they use hardware acceleration on iOS, though I don't know how they have it implemented.
When I encountered this problem it was because I was using a -webkit-transform: translate3d(0,0,0) effect to trick the iPad into hardware accelerating a div full of large images. The page would crash on load, but I was able to make it work by being more selective about which images I was trying to get the iPad to hardware accelerate at any given time. You might start by looking through the Royal Slider CSS to see how it's manipulating the images. Hope this helps!
Related
after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
So I've just gotten my app to work on IE10/WP8 (demo here), and one thing I've noticed is that both scrolling and transitioning between carousel cards are reasonably sluggish on Windows Phone. Specifically, it takes like half a second for the screen to catch up to my finger. I'd say it's at about 80% of the responsiveness than I get from Android and iPhone, which both have pretty much perfect responsiveness. For reference, here are the devices I'm testing with:
iPhone 4
Android Kyocera Rise
WP8 Nokia Lumia 920
Desktop PC (Windows 8)
So among the phones, my Windows Phone is easily the most powerful, so it likely isn't just a hardware consideration. I've found this sluggishness in fastbook (http://fb.html5isready.com) as well. However, the sluggishness on either app does not exist on my Windows 8 PC.
Is there a particular consideration that needs to be taken with this part of performance in WP8? I've done quite a lot of work optimizing overall performance on the app (destroying/recycling all unused DOM elements, event delegation, etc) and the rest of the app runs quite well. So I'm not sure where I should go from here.
Thanks in advance!
How are you serving those large images? Have you tried using sencha.io to serve them? You can also use the yahoo tool smush.it to crush images further without loss of quality.
Another question: are you using CSS shadows and effects? These can have a noticeable performance hit sometimes...
Also the custom font, how are you implementing that? Google fonts work well, or are you implementing it another way?
:-)
For some reason, black boxes are displaying in random spaces in Chrome (latest build).
Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after scrolling, and will often disappear when opening the inspector, hovering over elements, or scrolling down and back up.
For reference, there are some animations, box-shadows (which have been disabled with no luck), linear gradients, and position: fixed elements on the page, although this is not an issue with browsers other than Chrome.
This has been widely reported in user testing, although I have not been able to conjure up a fix. I am not sure if it is a CPU or graphics card issue, as the site is relatively lightweight and I am browsing with a new laptop with 16gb ram. My old Mac Mini, with 4gb of ram, does not produce this issue.
Any pointers would be most appreciated.
Update: This was a bug in Chrome and was fixed: https://code.google.com/p/chromium/issues/detail?id=142038
eddz filed the issue at crbug.com/new and over 40 people starred the ticket to follow along. It led to a few separate fixes in Chrome by the engineering team.
I had this issue with a website that was using transformZ (0) to force GPU rendering. When I removed this style the issue disappeared
This isn't an answer, but if you are able to somehow reproduce it maybe later on down the road:
Make a copy of the page locally, or anywhere, set the base href to the main domain, now start removing css links and js scripts from the bottom to the top until you don't experience the behaviour anymore, if you get to that point then the last script/stylesheet you removed is the culprit.
If you find the culprit file, now try finding the culprit line/section.
If you don't get to that point, it may be the browser, but it doesn't sound like it is.
It may also be linked between scripts/stylesheets and/or accidentally inherited.
We had experienced this weird blocks too on our website. In past we was using transitions, transitions was reproducing another bug "weird lines" randomly appeared on page and dissapear during scroll.
Now we start using transformX-Y, may be in some places Z too. And we have got this hell bloack blocks.
It seems something wrong in Chrome with transfom + transition animations. May be this bug appear when too much blocks animated at one time?
FF works fine.
I encountered these same boxes. For me, the problem was that I was using mp4 videos, which are deprecated in chrome, instead of webm videos.
I think is related to the GPU I had the same issue on my website. And it stopped happening when I turned on the Metal Rendering flag.
My website renders back bgs randomly while scrolling. It is really heavy on videos and animations and looks like chrome has so little GPU available that graphic intensive website doesn't work correctly on blink. I noticed that when chrome used webkit those issues didn't happen.
I this is a blink render issue.
I am running into a random issue in a website that I am working. This website contains many images and some images are 1Mb in size or bigger. The site also uses some CSS3 tricks, like 3D rotations.
Since I added this 3D CSS stuff, I noticed a problem in Google Chrome where some random areas in the website are not rendered.
This is a screen-shoot of how the site should be rendered, the green lines are because I've enabled the "Composited render layer borders" on chrome://flags:
And this is how it get rendered when the issue happens:
This white squares appear randomly and they can disappear or reappear in another place if the scroll the website. I also noticed that this problem is more common in lower-end computers so I my guess is that somehow Chrome is running out of GPU memory.
Why this problem happens? and is the any workaround for it (besides disabling the 3d CSS)?
In case it helps, this is the website:
http://colocation.cubo.cc/cheetos/masterbrand/
Update:
I raised a issue for the Chrome team.
I couldn't reproduce this problem in the Chrome Canary.
It was a Chrome Issue, and its fixed now:
http://code.google.com/p/chromium/issues/detail?id=121779
I can only congratulate the Chrome team for pushing bugfixes so fast, I wish IE was like this.