autodesk viewer fullscreen broken on iOS? - autodesk-forge

Noticed that when I go to view a 3d model on my iPhone (using the latest version safari or chrome), the full-screen button doesn't work. Anyone seeing this problem and has figured out a solution?
Public example you can try on your phone.... https://autodesk-forge.github.io/viewer-javascript-offline.sample/

This is a known issue and is being addressed by the Dev team. Stay tuned to the official Forge blog for release notes of future versions of Viewer to keep tabs on the fix.
In the meantime one can work around by programmatically toggling the toolbar (there's no display cube on mobile either):
viewer.toolbar.setDisplay('none') //hide
viewer.toolbar.setDisplay('block') //show
You can come up with a button of your own as the control for this.

Related

Google chrome on android zooms page out on: open off canvas menu

have created a quick test off canvas menu in zurb foundation, works great except: On every other browser, than chrome (both ios and android) tested: (http://prntscr.com/obpii6) it looks like it should.
But in chrome when you "toggle" the "off canvas menu" then the menu opens as it should but then jumps and zooms out (the text becomes way small) http://prntscr.com/obpkjb
Anyone have any clues as to what might cause this? I have never experienced anything like it before.
To anyone else who bump into this, and find this question in a search:
I found out that in chrome on mobile devices you can activate a force zoom activation, this option in the browser settings seemed to be the culprit. The option isn't activated by default.
So if you experience something like this check the following: goto > settings > Accessibility > Force enable zoom option, deaktivate this and see if this helps.
If someone know of a clean way to prevent this strange zoom out via html,css og js, do share :)

Input focus issue on iPhone

First off, after doing some research I am aware of previous issues relating to input fields causing issues on iOS. However, apparently this was fixed in iOS update 11.3. The device I am using for testing is an iPhone 5s running iOS 11.4.1.
I have created an html document (includes css and JS) and it is stored on the Google Cloud Platform here. If you open this link on either an Android or iPhone, everything displays and works as intended.
I am using AppPresser to create a mobile app. A page of the app loads the Google Cloud link and displays it with no issues. AppPresser provides a previewer app that can be installed on a device for testing the current app build. On an Android device, the html page still works perfectly as intended, but there are issues when testing on an iPhone. Here are some screenshots:
If the "Purchasing Price" input is focussed while at the bottom of the screen, it moves to the top as space is made for the keyboard.
Before:
After:
However, if the "Purchasing Price" input field is near the top of the screen and it is focused, everything seems to go haywire. The container vanishes and a previous container is shown. The user cannot see what data they are entering.
Before:
After:
I find this issue to be very strange, especially as the html page works perfectly on an iPhone when opened directly through the browser. Any feedback would be much appreciated.
Thanks
I thought I had tried all the fixes provided online, but adding the following css:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
from this article, did the trick! I am still confused by two things that maybe someone can clear up for me.
Why did this issue only happen when previewing my app build, and not when loading the html file directly through the iPhone's browser (file is hosted on the Google Cloud Platform).
Why did I have to implement a fix for this, when apparently the input issues were addressed in iOS update 11.3

elements display incorrectly on tablet browsers

I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.

Flot graph and Google Chrome

I'm having an issue with flot graph and Google Chrome.
The problem is reproduceable as follows:
Open an flot graph
Lock your screen
Unlock your screen and you will have to refresh the page to repaint the graph
It works fine under Firefox and IE.
Does anybody know how to resolve this issue?
It's probably a Chrome hardware-accelerated canvas bug. Try visiting chrome://flags and turn off hardware-accelerated canvas, then see if the problem persists. If it goes away, then you know that it was due to some interaction between Chrome, your graphics driver, and your graphics card, and you should file a bug with the Chrome team.
Thanks for your reply
My setting were
Disable accelerated 2D canvas
Enable
I assume hardware acceleration is now off, and it is not working
Clicking on enable and it is working.
The problem has to with the hardware acceleration, I can se that now.
But I have to turn it ON and not OFF to get it working
Thanks again

Pinch-to-zoom as scroll wheel in web browser

I have a Windows 7 tablet (an ASUS EP121), and I am using a web browser to display a Google Maps-based web application that I have created. Basically, I want the pinch gesture to zoom the Google Map (similar to using the scroll wheel to zoom a Google Map when using a mouse), rather than zooming the entire web page.
In Opera, Firefox, and Chrome, the pinch gesture simply zooms in the entire page. This behavior makes perfect sense for most use cases, but I'm wondering if there is any setting, in any of these browsers (e.g., Opera, FF, Chrome) that can cause the pinch gesture to behave like a mousewheel instead of zooming in the entire page?
Interestingly enough, in Arora, the pinch gesture can be used to zoom in/out a Google Map; however, other issues are preventing me from using Arora effectively that I think will be more difficult to address than the issues I am raising in this question.
Another option would be to disable pinch gestures (I know this is possible in Firefox, I'm sure the other browsers have some means to do the same), and then try to let the application take care of it. Are there any thoughts on going this route? Would something like jQuery mobile be able to accomplish this?
As a last resort, I could use Qt's webkit and implement my own event handling (basically creating a stripped down Arora), but I'm really hoping there's an easier way that utilizes currently available browsers.
Thanks.
If anyone ever runs into the same problem that I had here, I have created a very simple WebKit-based web browser using Qt that implements a pinch gesture and uses it to fire off a scroll wheel event.
It works quite well (especially for Google Maps) and the source is available on github here. I've tested the code on Windows 7 and Ubuntu Linux 12.04; it works without any problems.