I am using jquery BlockUI Plugin and I'm facing an issue.
In the iOS devices when in portrait mode the overlay comes fine but when the user switches to landscape mode the overlay comes but with the same resolution of the potrait mode which looks wierd.
So is there any way I can override the CSS of the overlay without editing anything in the jQuery BlockUI plugin or is there any setting that I need to do?
The issue may be that the page is being drawn at the larger width and when you are switching resolution to the portrait view the device it is not redrawing the page but resizing it. Here is a jquery function that may fix your problem.
Just call that function when you detect a window resize.
Related
Used sample html along with PWA.
Added the app to home screen using safari in iPhone.
In browser whenever there is an orientation change I am able to get the proper window inner height and width, whereas in app that is launched form the home screen icon it doesn't give the changed width and height immediately in the orientation change callback.
Can someone help me with this?
Device: iPhone 12 safari
It seems to be a bug in Webkit browsers:
https://bugs.webkit.org/show_bug.cgi?id=170595
Someone suggest:
To avoid creating a new element, The following workaround seems to work fairly well for me:
For non-Safari, get the layout viewport size from document.documentElement.clientHeight (& Width).
Unfortunately, Safari's documentElement size does not update when the URL bar hides so I couldn't just apply it to all Webkit browser, but this bug just doesn't happen to Safari.
I have this annoying problem where Safari Mobile rotates the pictures I take with the phone camera. The weird thing is that it only happens while in portrait mode.
Here's a code sample: http://jsfiddle.net/Kazpp/
As you can see I'm adding the image as background of the preview div and setting the background-size property as cover so I can keep the image aspect ratio and fill the whole div area with the image.
I also tried adding an image element as children of my div, but that didn't worked either.
Does anyone have any clue on what's going on here?
Ps.: I'm having this issue on iOS 6.0. Didn't tried another iOS version.
You're running into an Exif orientation issue JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
As answered in that post you can use this library to check image orientation and rotate accordingly https://github.com/blueimp/JavaScript-Load-Image
I am using a UIWebView in my app and when I rotate my iPhone the webview rotates along with it, works just fine. However, you see the corners of the background view behind my webview as it rotates and it can look a little flickery when rotating.
So I went and tried Safari on my iPhone, using the same website and it different. In Safari if I rotate, its far smoother, I can also see it zooms slightly.
For example, I am on Apple's homepage in portrait mode, fully zoomed out to see the whole page. I rotate to landscape and the contents zooms, as far as I can observe this is why it looks smoother.
So, my question, how can I achieve this in my app?
I have played with the 'Scales Page To Fit' option but had no success.
Currently:
Rotating scales the webpage to fit the view. (Whole page is zoomed out to be seen).
Required:
When rotating, rather than rescaling the page, just let it zoom as required.
Don't know if this will help you, but you might find it useful to change the background color (or even background image) of the view behind your webview, which might mitigate your issue with seeing the corners.
If you haven't found a solution yet... As an alternative you could try refreshing the webview, if you notice that the device has rotated, refresh webview and webkit should renderize it again, also play with the HTML meta viewport tag (initial zoom, scale, etc.) and CSS media queries to support different scales. As for the HTML document, try using em, and pt units in CSS rules.
//reload webview
[self.webView reload];
link Orientation Notifications
hope this help in something
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
While I'm developing an application with the Nokia 2.0 SDK, I've found this bug in my app.
When the device is in Portrait mode, the Form's scroll works fine but when I change the orientation to Landscape I find that the scroll makes bigger than the info in the page.
How can I solve that?
Seems like a bug in the S40 port. Just detect the orientation change (by overriding Form's size changed) and call setText() again. It will trigger a recalculation of the rows in the text area.
I solved it!
I forget to put the layout to the Form and it doesn't recalculate the size.
Now it's working! Great!