.. here is the dummy: http://cybergrafic.at/projects/apprunner/
position is fixed; the elements inside the fixed div are float:left; if you change from portrait to landscape, everything works fine; if you change from landscape to portrait, the fixed div moves 30px to the RIGHT, after touching the pad it moves into the correct position;
tested with iPad 1 & updated iOS 5.
The issue, I believe, is that mobile safari doesn't always repaint the view fast enough.
Toggling position:fixed on the element does cause a repaint, but it also resulted in a "flash" for me in my tests.
I just found this, works great:
bruteForceRepaint: function() {
var ss = document.styleSheets[0];
try { ss.addRule('.xxxxxx', 'position: relative'); }
catch(e) {}
}
force mobile safari to repaint / redraw
Related
Just want to ask if anyone knows how to fix a bootstrap carousel glitch on iPhone devices, it autoplays but the slide is glitchy or something, it double slides per item. Only at iPhone X-11 / safari browsers. Works fine on chrome and desktops. Thanks in advance!
fixed the blinking (but the slide animation from right to left will not work - slides just appear):
.carousel-item {
-webkit-transform: translateZ(0); -moz-transform: translateZ(0);
}
related to: Bootstrap 4 Carousel is blinking during transitions on safari browser
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.
Here are some steps to mess up the iPhone's rotation when in Safari
Holding the phone in vertical mode and navigate to google.co.cr with Safari
Rotate the phone horizontally
Rotate the phone vertically
The page is clipped as seen here:
A simple horizontal swipe will bring it back.
This is not a problem with google.com, only with google.cr.co, but it illustrates the problem I am having.
Oddly enough, if you do the search from the Google Search box in the Safari Header, this resizes back to normal.
My web page has the same problem when following the same steps... it gets clipped.
How can I fix this?
Simply reset the viewport on orientation change.
window.addEventListener('orientationchange',function() {
if(window.orientation === 0) {
window.scrollTo(0,0);
}
},false);
I am developing a web application using jquerymobile, I set the page style width and height as 100%. I have the background image for that page and also set the backgroundimage to repeat.
On the iPhone, in portrait mode, the background occupies the full screen size, but when I change to landscape mode I am getting whitespace(without bg) in the bottom of the screen. It is only on the iPhone that I have this issue. I have also tested on android, ipad annd blackberry devices. On all these devices both orientation have the background image perfectly occupy the full screen according to the controls.
Has anybody faced this problem? Or can give me some suggestion for this issue?
Two ideas:
Try setting the background to body, not page if you can,
Define background for both classes
.portrait yourelement {
/* the same bg declaration */
}
.landscape yourelement {
/* the same bg declaration */
}
I am get resolved in this issues. I am just removed height and width of the page and the problem is solved, that mean i am setting width and height as 100% so when controls went out of that screen i am getting that issues, so removed the specification that get resolved but after removing that same issue reflect in ipad for that am edited the jquery.mobile-1.0a3.min.css file in that they set max height of landscape and portrait i just removed both height ,and all my problem get solved.
Thanks for your response naugtur.
My app contains a UIWebView. When the app rotates from portrait to landscape or back, the font weight appears to slightly change. Both bold text and regular text get slightly bolder in landscape, and slightly thinner in portrait.
This does not appear to be the case in Safari, only in my app. Here is an example image, taken as a screenshot on the iPad. I have rotated and cropped an example section.
alt text http://dl.swankdb.com/font-change-example.png
I have the following CSS configured, but it seems to prevent the drastic font size change, not the subtle weight change that I am observing:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Can anyone explain this? The simulator does not do it -- but my iPad, iPhone 3GS and iPhone 4 all have it. I've also received reports from customers that it happens to them, so I know it's not in my head!
I've seen this in Safari itself too with a web app I'm putting together. After a day or so of head scratching, and deconstructing the CSS used by the iPad User Guide, I found that
-webkit-transform: translate3d(0,0,0);
does the trick. Googling around it looks like this enables hardware acceleration of rendering which leads to far more consistent results in portrait and landscape orientations.
Well after spending a rediculous amount of time trying to figure this out I have found a solution:
Use this:
html {
-webkit-font-smoothing: none;
}
The reason for this is that only one mode can make use of the subpixels in the display, because they are arranged in a certain direction. The other mode will display the font with greyscaled anti-aliasing and appear slightly different.