hide the orientation transition on safari ios - javascript

i thought this would be an very frequent question, but i actually did not find any answer to it.
i am making a webapp/website for mobile.
When the user rotates his phone, i want to hide the whole body just before the page is rotated, with that ugly deformation/transition. Then, when this transition is done, show the body again.
here i have done a minimal version of the code that works on android.
there is a background image from loremPixel on the body, and a red background on the html tag.
the expected result is: never seing the image rotate. only a red screen (not rotating either)
thanks for any help.
ps: i think i have narrowed the problem down to the orientationchange event being fired after the rotation on ios, and before(as i would expect) on android

Random idea.
$(window).resize(function() {
$("#wrapper").css("display","none");
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#wrapper").css("display","block");
});
Start resize, hide wrapper. No resize in 0.5 seconds, show.
http://jsfiddle.net/7ktg9can/

Related

Vertical scroll animation 'jumps' on iOS

I'm working on a site that uses CSS3 animations.
I've noticed on iOS the comic captions 'jump' which I believe is caused by the address bar changing one of the window properties used to calculate the caption position.
Source code is available here: https://gitlab.com/ashleyconnor/adventurersclubcomic
If I'm correct in my assumption. Is there an accurate way to offset the iOS address bar so there is no jump (sudden increase) in any of these values?
I cloned your repo, and was able to reproduce the jitter on window resize in both Firefox and Chrome. After a few minutes of debuggine, I think the problem is actually in your index.js file.
You are completely refreshing the enllax plugin every time the windows resizes. This appears to be unnecessary.
If you remove the excess calls to the enllax function like this:
$(document).ready(function() {
// function enllax() {
$('#start').enllax({
type: 'foreground',
ratio: 0.5,
direction: 'vertical'
});
// $(window).scroll();
// };
$('#begin').click(function() {
$('html, body').animate({
scrollTop: $("#panel1").offset().top
}, 1000);
});
// enllax();
// And trigger the scroll event on resize to deal with changes
// in the responsive layout
$(window).on('resize', $(window).trigger('scroll'));
});
With that update, the jitter stops on resize in all the browsers I have installed. It remains to be tested in iOS because I don't have any Apple hardware to test it on, but I suspect it should fix the problem there as well.

Swiper slider gallery, and changing orientation on Iphone's

I made an image gallery format. It's responsive (boostrap and some own medias #), when i click an image, a Swiper (http://idangero.us/ plugin) slider opens to show images one by one in a bigger size. I tested on PC, and Android phones, and it's working fine on this 2 devices:
responsive, changing orientation on phone (android), all formats are working fine...
except iphones, when i click an image, it opens fine, but when orientation is changed, it doesnt resize the swiper area.
I allready try this 2 options:
window.addEventListener("orientationchange", function() {
mySwiper.update(); and thisone: mySwiper.onResize();
});
Also i notice this, after changing orientation (landscape to portrait OR portrait to landscape), and do a small scroll-down, swiper resize the container (the scroll to hide the addres-bar upside) and works fine, but in android, that's not necesary.
It's look like a huck, but it's worked for me:
$(window).on('orientationchange', function () {
setTimeout(() => swiper.onResize(), 50);
});
I had similar trouble when using Swiper (4.4.6). On iOS after an orientation change, Swiper appeared to be "confused" as to how many slider elements it contained and would let me slide beyond the final element. Although the OP stated it didn't work for him, I had success with:
$(window).on( 'orientationchange', function()
{
mySwiper.update();
} );
I happened to be using jQuery, but I'm sure it would have worked as well using DOM only.
Be sure to change the reference to "mySwiper" to whatever your Swiper instance global variable is named!

Chrome HTML5 Video - Blurs webpage on resize

I'm using the BigVideo.js plugin (http://dfcb.github.io/BigVideo.js/) in a website of mine. I am also using the following Javascript to scale the site up or down as the user resizes their browser.
$(document).ready(function() {
scaleSite();
});
$( window ).resize(function() {
scaleSite();
});
// Scale Site to Fit Window
function scaleSite() {
var windowWidth = $( window ).width();
var defaultWidth = 1200;
var scaleWidth = 1;
var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// MOBILE ACTIONS
} else {
// STANDARD ACTIONS
if(windowWidth >= defaultWidth) {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
} else {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
}
$("#mainDiv").css("-webkit-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-moz-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-o-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("msTransform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-webkit-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-moz-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-o-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("msTransform", "scale("+scaleWidth+")");
// RESET BODY HEIGHT
var mainDivHeight = ($("#mainDiv").height()*scaleWidthRounded);
$("body").css("height", mainDivHeight);
$("html").css("height", mainDivHeight);
}
}
Strangely enough, when I load a page that has a video playing on it, and I try to resize the browser, the scaling works correctly but everything BUT the video gets a little blurred.
I had trouble with this same issue when using the Jssor Slider plugin, it also caused my pages to blur after resizing the browser window. I resolved that issue by adding the $HWA : false to the options for the Jssor Slider, which disabled the plugins ability to use Hardware Acceleration.
Is there something in the BigVideo.js or the underlying Video.js file that I can adjust to prevent hardware acceleration there as well? As it seems to be the same cause.
UPDATE
I just noticed the blur issue ONLY happens in Chrome. Firefox and Internet Explorer both work fine with no problem, but in Chrome, all content on the page OTHER than the BigVideo itself gets slightly blurred.
UPDATE 2
Okay, so I just noticed that if I inspect element on the div containing the HTML5 <video> tag and I delete it from the DOM, my text "snaps" back into focus. I went through the div item by item and unchecked CSS styles thinking that would lead me to the one that is causing problems but still no luck.
Why would deleting the element from the DOM in the Chrome DEV tools snap the rest of the page back into focus and remove the blur?
Below is a screen shot showing an example of the text on my page BEFORE I resize the browser window, and the result AFTER I resize. Again, if I resize, the page gets a bit blurry, and if I delete the element containing the <video> using the Chrome DEV tools, the blur goes away.
UPDATE 3
So I removed the BigVideo plugin and replaced it with a generic HTML5 <video> tag, the video still plays and the blur issue is still present when resizing the browser. So it's something with the way chrome is handling the HTML5 video along with my scale site script.
JSFIDDLE
https://jsfiddle.net/h5vu7La7/3/
Not sure if this will help or not, but if you resize the window on this jsFiddle you can see the text (in Chrome) is blurred a bit. If you remove the <video> from the HTML and re-run and resize it does not blur.
Also noticed if you run the fiddle, and inspect element on the video and delete it from the DOM, the text snaps back into focus.
If you are applying transform scale CSS rule to a HTML element that has child elements (I'm guessing those visible in the pictures are inside one of the divs you are scaling), they will get somewhat blurry due the layer moving to 3D plane.
Open inspector and apply transform: scale(1.01); to the blue button below here on SO and you'll realize what I mean.
Instead of scale, you should just resize the width and height of the video element.

Getting wrong screen height when trigger orientationchange event

I wrote the code below to check my mobile screen height when I rotate it to Portrait or Landscape.
window.addEventListener("orientationchange", function(event) {
rotateScreen();
}, false);
function rotateScreen() {
alert(window.orientation)
alert($(window).height())
}
When I rotate it to Portrait, I get 0, 294. When I rotate it to Landscape, I get 90, 419. The figure is reversed, I have tried to wrap it in $(document).ready() but it does not work.
$(document).ready(function(){
alert($(window).height())
})
It looks like that when I rotate the mobile to Portrait, I get the height of Landscape, and when I rotate the mobile to Landscape, I get the height of Portrait. Can someone suggest how to fix it?
Thanks
The resize event gets triggered after the orientationchange event. However resize can also get triggered by other things such as showing the virtual keyboard.
So to get round this we can listen first for an orientationchange, once that occurs we can then add a resize listener. Once the orientationchange has completed it will fire our resize event. Once completed we then remove the resize listener to prevent it being fired in error
$(window).on('orientationchange', function() {
var orientationChange = function(evt) {
rotateScreen();
$(window).off('resize', orientationChange);
}
$(window).on('resize', orientationChange);
});
This effectively creates a kind of pseudo post:orientationChange event. (I would probably avoid using timeouts if you can)
Adding setTimeout could solve the problem, please try the code below:
function rotateScreen() {
window.setTimeout(function() {
alert(window.orientation)
alert($(window).height())
}, 500);
}

iPad canvas rotation

I created a canvas element and I'm using javascript to make it as big as possible in the viewport, while maintaining the aspect ratio.
When you rotate the iPad, the device first rotates the page and only after that launches the resize event.
The problem is, if you come from landscape (about 800px wide) to portrait (about 400px), a part of the body is not being displayed, because the resize didn't happen yet at that moment. After this, the resize event resizes the canvas to the correct size, but then a part of the canvas (& document) is still outside the viewport.
So basically the problem exists because the resize event only launches after the iPad already cut off a part of the body on both sides because the body is too wide.
I could fix this by setting a margin to the canvas to compensate, but it's a dirty solution... does anyone have a better suggestion?
This could also be considered a dirty solution, but in the past I have used a setTimeout to deal with this issue, and it seems to always be reliable.
window.onorientationchange = function() {
canvasResize();
}
function canvasResize() {
window.setTimeout(function () {
//Your code here based on new size
}, 100);
}
Or if you are looking for a slightly less dirty solution, you should be able to just keep track of the viewport width yourself, and then wait until that changes to do your updates. Add to your script somewhere:
var viewportWidth = window.innerWidth;
And change canvasResize:
function canvasResize() {
if(window.innerWidth != viewportWidth) {//Dimensions have changed for sure
viewportWidth = window.innerWidth; //Update viewportWidth for future use
//Your code here based on new size
}
else {
//Delay and try again
window.setTimeout(function () {
canvasResize();
}, 100);
}
}
Both of are pretty quick and dirty, and I'd be interested if there's a more elegant solution, but I haven't found one yet.

Categories

Resources