I am working with drop down list on mobiles. For testing purposes I'm using Chrome's mobile emulator. One strange thing I noticed is that in mobile emulation if I have more than two elements in the drop down list they are hidden in a strange way.
HTML I'm using
<!DOCTYPE html>
<html>
<head>
<title>Simple Dropdown</title>
</head>
<body>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Screenshot of desktop
Screenshot of mobile
I'm using chrome version 48.0.2564.97 m. I tried it on my friend's PC who was running Version 47.x.xxxx.xx (don't remember the exact version) and its working fine on that.
Is this a bug in chrome ? Did any of you faced the same issue ? If yes is there any fix ?
Sorry, this is a bug in M48. Some refactoring happened and it had some adverse affects. It has been fixed in M49 coming soon™. Trying to see if it is reproducible by any team members in stable and get them to backport to M48 if possible.
I've been wrestling with the same bug for a couple hours,
It does not seem to be related to anything css driven and I confirmed that the bug does not present on chrome on my mobile.
I'm sure it's just a bug in the emulator,
firefox's emulator renders dropdowns fine,
I know this isn't all that helpful I just wanted to confirm that you're not the only one seeing this
Related
I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.
Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.
I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
Thanks!
Make sure you include a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.
Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.
I've been having trouble for quite some time. I need to get the canvas working on a mobile web app of mine but it seems to be having trouble with paper.js.
I have set my viewport to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
And the canvas element:
<canvas id="canvas" resize="true"></canvas>
But the canvas never seems to render at ALL.
I hope I've given enough information. I'm almost certain that I have no problems from the JavaScript side.
Go easy on me please!
Thanks
Did you know it's possible to debug javascript issues by stepping through your code running on the iphone in safari using safari on your mac?
Usually when I run into issues like this, it saves me!
Here's a link that will help you do this: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
If you would like to learn more about paperjs, check out this screencast I created: http://tagtree.tv/canvas-with-paper-js
I developed this website
It looks fine on most browsers and OSes on PCs. It even looks nice on my HTC with Opera Mobile. Unfortunately I keep getting reports about how it displays on iphones. I don't have an iphone so here are my questions:
Is there an easy way to reliably check (emulate) my website on iphone (I tried sites like this
but what this site does it opens iframe in safari trying to emulate ihopne native screen size, but the problem is somewhere else...)?
Any quick tips on obvious mistakes I made?
Thanks for help
If you have got a computer with MacOS installed (it could even be a hackintosh), you can install Xcode there and then run the iPhone simulator from it. Once you are there, you can open Safari in the simulator and enter your site URL to have a look.
I am also attaching a snapshot of the simulator with your home page.
You might try defining the viewport in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Also, have a look at the other meta tags available in Mobile Safari.
I partially found the answer. As it turned out most mobile browsers (including safari for iphone and default browser in samsung galaxy) don't support
{ background: transparent;}
So I need to provide fallback colour as described here: http://css-tricks.com/rgba-browser-support/
So, I use the same fb-like plugin (fbml based one) code on 5 different pages on the website. The only difference is the different data in meta description and type of content. All pages were checked through the fb linter and it says everything is okay. All the buttons work alright in Chrome under Mac OS, but in Firefox, Opera (Mac & PC) and Chrome on PC (Windows) 3 of these buttons do not appear and none of them work in Safari on Mac. I can see that fb scripts are working some way, you can see the code with built-in developer tools in Opera or Chrome, and the element does occupy the space, but the button is not shown...
I've tested all the code in the pages including html, js and css line by line and it looks like it doesn't affect the fb-likes. I've also take the code from the page with the problem fb-like and make the new page with the only difference in fb-like href property - and it works. But when I change the href to the address of the page where like button didn't work - it stops working. So as I understand the problem is not on the website side, but since the fb-linter doesn't show any errors the problem is not on fb side either. But where is it then?
I've contacted the fb developers team, but I guess it may take them extremely long to answer , so I'd like to know if sombody had such a problem before. Any opinions or thoughts are appreciated!
Here's the website.
Thanks in advance everybody(:
~
I have been having some general problems with TinyMCE inside Opera. Some of these include:
the save button produces an error
when submitting to a popup with an entire form, including TinyMCE, nothing gets posted to the popup (when TinyMCE is removed it works fine)
Has anyone else experienced these errors and/or does anyone have a solution to make TinyMCE more compatible with Opera?
TinyMCE is not the only rich text editor for web. You could even try a what you mean editor or some Flash based solution.
I recommend CKEditor, it works like a charm on Opera and is also very configurable and powerful. I also had some issues with TinyMCE using the latest Opera to date (v12.15).
It depends on the version of Opera Mini you are using. The supported version is v.50 and above. The Opera Mini version 52.3.21517 and above are the supported version for TinyMCE. You can get the version 50 of opera mini mobile browser here https://press.opera.com/2019/02/19/opera-for-android-hits-version-50/