I'm making a webapp which recently broke on Windows phone 8.
https://marvin-brouwer.github.io/QR-Reader/
I've also tried the app on an Ipod Touch 3rd generation, an iPhone 4s and a Samsum Galaxy. The app works as expected on those devices.
To find out why it doesn't show what I expect I attached to my Nokia Lumia with Visual Studio which revealed the html being cut off.
I tried deminifying my html but it just gets cut off at a different part.
Is there any reason why this might happen? And is there a way to fix this? Or might this be a Windows Phone bug?
You have a html comment before the doctype which causes IE to go into quirks mode.
Also you have a xml comment which should be removed, this is html not xml.
More info: https://www.sitepoint.com/community/t/xml-declaration-in-html-xhtml/87783/2
Related
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
I have a problem where a Silverlight system I have developed is working perfectly in Internet Explorer but not at all in Chrome or Firefox
I have no idea where to start to try to figure out what the problem is?
Chrome just says Cannot load Silverlight plugin which is obviously useless from a debugging point of view
Firefox just displays the container page
I have used firebug and interestingly Firefox makes no attempt to download the xap files?
This is a major issue and any pointers would be very helpful!
The application does make use of Prism which may be something to do with it
Paul
I am testing our web app for various mobile devices. In this case, I’m running a Blackberry simulator that simulates a Blackberry Bold 9900 running Blackberry OS 7. There is nothing out of the ordinary in my pages. The first page is not particularly special, it is Html, jquery, and jquerymobile. However, the Blackberry simulator's browser shows my page like a 1970s color TV that needs its rabbit ears adjusted.
I don't have access to a real blackberry at the moment, but I've been told that our pages don't show this distortion on real hardware.
Are there any workarounds to get the simulator to better reflect that real hardware?
Is there something in my Html that is messing up the presentation on the simulator? If I don't use jquerymobile, it looks fine (for whatever that is worth).
I tried the same experiment with the jquerymobile demo site.
http://jquerymobile.com/demos/1.3.0/docs/intro/ - shows the same colorful mess as my app. See captured image below. http://forum.jquery.com/topic/jquery-mobile-demo-page-causes-blackberry-7-1-simulator-browser-to-crash has an interesting comment from a Blackberry employee:
The page does load, but not without some very major rendering
artifacts (there appears to be a colourful static/noise overlay on top
of the content.)
The simulator came from the Blackberry site.
--- Update
Blackberry device simulators can be downloaded from http://us.blackberry.com/sites/developers/resources/simulators.html
You can download simulators for a specific device and OS version. It seems that some of the simulators are buggy and don’t support jQueryMobile. However, I’ve found that the Blackberry 9790 for Blackberry OS 7 works well so far. This is 7.0.0.592 (9790).
I tracked this problem down to CSS, and more specifically the following tags:
-webkit-perspective:
-webkit-transform:
when commenting these out everything was fine.
Update: It seems like upgrading the graphics driver may solve this problem (it didn't work for me):
http://supportforums.blackberry.com/t5/Testing-and-Deployment/Blackberry-7-emulators-bug/td-p/1409051
This seems to be an error with the program itself, not your HTML. If your code works fine on the real thing but not on the simulator, then it's probably the simulator.
I'm trying to understand these strange rendering error boxes that are too big to be ignored. This seems to happen on Chrome in Windows 7 (my testing isn't too elaborate) and nowhere else. When I attempt to inspect, they all disappear. This could be some kind of video card issue as I'm using some pretty advanced CSS3 transitions that could mess up memory. In any case, if someone could offer advice on what I could do to fix, I'm at a loss. The site is www.crane-usa.com
Having the same issue with our site using 21.0.1180.89 and 21.0.1180.79. Problem is in Windows 7, Mac OS X latest, Ubuntu and in Chrome frame running in IE9. IE9 with Chrome frame disabled works fine. The problems are intermittent and unrepeatable. Inspect element removes the problem as you say. I tried disabling GPU compositing via chrome://flags but that didn't fix the issue.
We and our users have only been seeing these issues since approx Aug 27, 2012, 3 days ago. I took a look in crbugs.com and found that this seems to have existed for a couple of weeks already. http://code.google.com/p/chromium/issues/detail?id=143647
Sorry our site is not public so I can't post our url but you're not alone.
I did a new Drupal theme for my site based on the Zen theme. Since I am on Windows 7, I did testing with IE8, Firefox 3.5, and the most recent version of Chrome. The site looks great in all of those, but I just found out that it breaks on IE7. Unfortunately there is no way to put IE7 on Windows 7, so I'm at a loss for how I am going to find the exact cause and test a fix without flagging down a friend with IE7 on Vista or older.
My hope is that someone here might see what the issue is and point it out as something obvious. My HTML and CSS fu is not strong.
The site in question and some specific pages:
http://byswarm.com/
http://byswarm.com/setting-concept/mejijpunk
http://byswarm.com/page/plan
Any help would be greatly appreciated.
If you can use Microsoft Virtual PC. you can get IE6, IE7, IE8 VPC image free for development.
http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
Use Sun VirtualBox (freeware) to create Virtual Comps with Windows XP (for IE7) and Windows 2000 or 2003 (for IE6), also recommend to install additionally IEDevTools (tools like Firebug for Firefox) for these IEs...
For fast previewing pages in IE you can use IETester (support 5,6,7,8 versions of IE)
Normally IE8 has a button right to the address bar where you can display it rendered by IE7. If not, you can always try this header, that forces IE8 to render as IE7: