Chart.js disappears on Android - javascript

I am using Chart.js ( the branch with tooltips ) to display some charts and everything is good on Chrome on PC.
This problem only appears on Android (tested it on KitKat, Nexus 7, Chrome 31): after the charts complete the loading animations they are not rendered corectly anymore ( only part of the grid is beng shown and no data ).
Here is the page I have tested on: http://files.tips4design.com/wordpress/?p=7
As you can see the Pie chart is the only one displayed correctly after animation is complete.
I have tested this page on iOS7 (iPhone 4) and everything went ok.
LE: The same bug also appears on Nexus 7 on Opera.

I probe it in Chrome/Firefox/Native Browser in Nexus 5 with android Kit kat and goes nice.
It seems a render memory problem of opera. (I detect some bad memory handle in opera mobile with other canvas animation like highcharts)
Regards.

Related

What work arounds exist to make Aframe VR work on an iPhone or other ISO mobile device?

I am running:
Aframe 1.3.0
iPhone 8 running IOS 15.5
MacBook Pro (Mid 2012) running macOS Catalina 10.15.7
I have an aframe webpage that loads in a simple, test environment.
I am able to view the webpage fine (including VR mode) on my MacBook, although there is some lag when trying to run it on Safari.
On my iPhone, I cannot view VR mode at all. The regular view works fine, and I am able to drag to move my camera and look around.
When I try to enter VR mode, I get prompted to place my phone into my Google Cardboard and VR does not work. It will get stuck on a white screen.
I understand that there have been issues with IOS and webXR support in the past and people seem to be encountering similar issues to mine. The fixes suggested in those links also did not work for me.
I also get the following errors in the iPhone web inspector:
TypeError: scope.dispatchEvent is not a function. (In 'scope.dispatchEvent({
type: 'sessionstart'
})', 'scope.dispatchEvent' is undefined)
TypeError: undefined is not an object (evaluating 'camera.near')
I'd really like to make the VR work on both Android and Apple devices. Are there any work arounds to make Aframe VR work on IOS mobile devices?
I ended up using an older version of A-Frame.
The newest version of A-Frame doesn't run in VR mode on IOS; version 1.2.0 does. You can identify what OS the webpage is using and change the A-Frame version based on this. However, version 1.2.0 has different bugs and sometimes gives different behavior than 1.3.0. I had to make other changes on top of the A-Frame version to ensure the experience was consistent on both devices.

Bootstrap image responsive not working in IE and Firefox but works fine in Google Chrome

I am facing a weird behavior from bootstrap. I am using img-responsive class for a image in my page using bootstrap.
my image is fine in Google Chrome it re sizes properly but in FF and IE it is re sizing properly in desktop and I PAD view but when i go lower screen size like phones and i phones it doesn't re-sizes it stays the original size.
It works fine for Google chrome for every screen resolutions but in IE and FF it doesn't shrink in any single columns sizes. it retains the original size of the image which is very big.
Attached are the images from the web inspector for each browser.
Firefox
IE
GoogleChrome
Any help
Try updating to the latest version of bootstrap. This has been resolved since version 3.2.1
Related issue : IE backslash hack on .img-responsive stretches images in IE<11
Added col-xs-12 to all the divs being used, then it fixed the issue..

Javascript app laggy scroll in IOS7 devices

I've been using Chaps Link Timeline and it works well on all devices except on apple devices running iOS7. The problem is in the new iOS that is causing the lag. Basically scrolling (swiping left/right) on timeline is very laggy. Tested on both safari and chrome on an iPad.
How can I fix lag in new iOS?
Timeline:
https://github.com/almende/chap-links-library/tree/master/js/src/timeline
Github Issue:
https://github.com/almende/chap-links-library/issues/239
Online Demo:
http://almende.github.io/chap-links-library/js/timeline/examples/example01_basis.html
More Demos:
http://almende.github.io/chap-links-library/timeline.html

Header DIV disappears on resize in Safari but works in Firefox and Safari Mobile

So I've had this issue with my header. My site is adaptive and when it reaches tablet size and less the navigation turns into a drop down box. When I resize the window in Firefox it degrades nicely, but in Safari, when it reaches the switch the whole header disappears. I've been toiling with it and discovered that when I removed the slider or set the sliders display to "none" it works. When the slider is there I can't tell if the header div is behind the slider or just disappeared all together.
What in gods name is going on here?
Here's the site. http://www.benstephan.com/html
Your site works just fine in firefox, chrome and in safari too (tested with version 5.17). Probably you need to update safari then test. btw cool site.

png image shadow not showing in IE7&8

i have the problem for IE7 and 8 browser in Mozila FF and chrome works finely.
the problem is basically the dropdown menu is made of pang images with shadow effect for menu in this site it shows perfectly when i browsing with Mozila FF & Chrome
But the problem comes when i am browsing the site with IE7 & 8
the menu shows solid border instead of shadow.
and second prob. is when the page loading happen all menu images are showing.
Kindly visit this site
http://thirdgroove.com/
thanx
It's an IE thing. It has always had trouble displaying PNGs - even version 8 struggles. You could try changing it to a PNG8 instead of PNG24. That might work for IE 7 & 8, but I don't think it will help with IE 6 (you may not be bothered about that).
See:
How to solve/hack fading semi-transparent PNG bug in IE8?
and
http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html

Categories