I have two distinctly different presentations of a page, depending on landscape or portrait orientation. The first img on that page is assigned (via javascript) a landscape or portrait proportioned src depending on the orientation. This works on Safari, Chrome ,Firefox on all test desktop machines (Windows/Mac), all tested Android devices using Chrome or Firefox, and IOS iPads - where it breaks is on iPhone 5/6 (probably 7).
In the .ready javascript code I blank the page using $("body").css("visibility","hidden"), do my formatting, set the "src" of the image to portraitformatpicture.jpg or landscapeformatpicture.jpg and then renable the screen with $("body").css("visibility","visible").
This method actually works in all instances - rotating the device causes the screen to go blank, after which the properly orient image appears.
The issue is only on IOS Safari on iPhones - when the device is rotated you see the current page displayed in the new orientation, with the other (previous) orientation's image displayed. You see the new orientation displaying the page flipped sideways for "a while" (100s of milliseconds) at which point the "orientationchange" event fires in the browser, allowing the javascript to run, which correctly switches the image and formatting.
So the problem isn't that the orientationchange event doesn't occur, it's that the page is visible before any of the orientation-specific logic has had a chance to run.
How have any other folks addressed this? There is no notification that I'm aware of that can inform the javascript that a screen orientation change is imminent, only that one has already occured...
Related
Naturally, when you open a website in iPhone Mobile Safari in portrait and rotate it to landscape, it is going to turn "full-screen" (hide bottom-top browser bar). Then you rotate it back to portrait, it keeps the full-screen view (the bottom-top browser bar still not visible). To test, simple open Wikipedia in your iPhone (or on an iPhone Simulator) in portrait, turn it to landscape (going to be fullscreen right away), and turn it back to portrait (keeps its fullscreen view).
I need to change this behavior. I want to make sure, in portrait, the top-bottom status bars are always visible, but in landscape, my website is full-screen. (Because my HTML game is not scrollable, only this back and forth rotation is the issue.)
This game works on this way:
https://lobby.sgplayfun.com/touch/spadenew/20190115P/games/triplepanda/index.jsp?game=S-TP02&language=en_US
Open this game in portrait Safari on an iPhone (or on an iPhone Simulator), turn it to landscape (going to be full-screen) then turn it back to portrait, and the top browser bar is going to appear ???
How can I achieve the same, how does this Panda game do this?
Things I tried
Copy the < meta viewport > tag from Panda, did not work.
look for what does the "ioshack" and "iPhoneX" HTML class do - not helped
google all around, even check Chinese forums and pixiJS forums (that Panda game is a pixiJS app), did not found any useful.
After more investigation, I found the following truth at least on iOS 9-12:
Safari does not keep the full-screen view in portrait mode if the body is not scrollable, meaning the content fits the default view where the top and bottom bar is visible (they will automatically appear in this case when you rotates your phone)
Safari does keep the full-screen view in portrait mode if you use height:100vh on your or tag (instead of e.g 100%)
So, changing the body style to "height: 100%" AND making sure there is no div longer than the body was enough to force Safari avoiding full-screen mode in portrait.
http://jsbin.com/nesiside/1 (code is available http://jsbin.com/nesiside/1/edit)
If you scroll down in the document and click the "Lock/Unlock" button, an overlay with text will appear. You'll notice that the scrollbar length has been changed to accommodate the overlay height, not the original page height. Click "Unlock" in the overlay, and you return to the original page, in the previous scroll position.
System works great on desktop browsers, and on my Android phone, however, on iOS there is a rendering flash flash when the overlay is triggered or removed. Ultimately, I believe it is the fault of the scrollbar changing.
I've attempted the usual tricks to resolve iOS rendering issues (webkit-backface, transform3d), with no success.
Apparently, showing the content and hiding the overlay (or vise versa) was to much for the iPad 4 to render at once, causing the flash. This is odd because I tested it on an old Kindle and my Android phone and both are handled it fine with their slow processors.
To resolve the issue, I put the the scrollTop() method (used to return the user to the previous position on the underlying page) inside a requestAnimationFrame function. The result isn't perfect (content can be screen scrolling for a fraction of as section), but it is a much better result than an entire page flash.
Mobile Safari is not rendering images on our HTML5 website. These images are added dynamically via JavaScript.
We have tried the suggestions from these places, but none work for us:
How can I force WebKit to redraw/repaint to propagate style changes?
Webkit box-shadow gitches on top of the other elements
http://mrdarcymurphy.tumblr.com/post/5574489334/force-mobile-safari-to-repaint-redraw
The only things that cause the images to get rendered are if we either ask the user to turn the device orientation to landscape, or if we show a JavaScript alert. Once the user dismisses the alert modal, the images get rendered.
Steps:
1) Visit Tekiki.com on your iPhone. Make sure Wi-Fi is disabled (happens less consistently with Wi-Fi).
2) Tap on one of the apps. Images (app screenshots) on the bottom of the page will only appear if you turn the device sideways.
What else can we do to force WebKit to repaint/paint these images?
I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.
I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.