html - Background image jumps when address bar hides iOS/Android/Mobile Chrome -

-

I am currently developing a responsive site using Twitter Bootstrap.

The site has a full screen background image in mobile / tablet / desktop. These images spin across and fade, using two divs.

This is perfect, except for an issue. Using iOS Safari, Android Browser or Chrome on Android jumps slightly in the background, when a user scrolls down the page and gives reasons to hide the address bar.

The site is here:

Go here to scroll mobile device down and down and you should see image resizing / location.

I am using the background for DV, as follows: 

  # bg1 {background-color: # 3d3d3f; Background repeat: do not repeat; Background attachment: fixed; Background-condition: center center; -WebKit-Background-Size: Cover; -MOZ-BACKGROUND-SHAPE: COVER; -o-background-shape: cover; Background size: cover; Status: fixed; Width: 100%; Height: 100%; Left: 0px; Top: 0px; Z-index: -1; display none; }   
 All suggestions are welcome - for some time it is doing my head! 
 
 
 This issue is caused by the bars of the URL / sliding out of the way and #bg1 and # BGs change the size of the 2 devices because they are 100% altitude and "fixed". Because the image of the background is set to "cover", it will adjust the image size / position as the inserted area is bigger.  
 Depending on the responsive nature of the site, background should be scaled. I entertain two possible solutions:  
 1) Set # BG1, #BG2 height up to 100 VH. In theory, this is an elegant solution. However, iOS is a VH bug () I tried to use maximum-height to prevent this issue, but it remained  
 2) The size of the viewport, when defined by Javascript , Then the URL is not affected by the bar, so depending on the viewport size, javascript can be used to set a constant height at # BG1 and # BG2. This is not the best solution because it is not pure CSS and there is a slight leap on page load. However, this is the only viable solution I'm considering for iOS's "VH" bugs (which have not been fixed in iOS 7).  
  var bg = $ ("# bg1, # bg2"); Resize the function background () {bg.height ($ (window) .ht ()); } $ (Window). Resize (Background by resizing); ResizeBackground ();   
 On the one hand, I have seen so many issues with these size URL bars in iOS and Android. I understand this purpose, but they need to think about the strange functionality and the havoc that they bring to the websites. The latest changes, you can not "hide" the URL bar on page loads on iOS or Chrome using scroll tricks.  
 Edit: While the above script keeps the background fully resized by resizing, the reason for this is when a significant difference between the user scrolls. This is because it keeps the background bar lower than 100% of the screen's height. If we add 60px from height, as Swiss suggests, this problem gets resolved. This means that when the URL bar is present, we will not be able to see the bottom 60 px of the background, but it prevents users from ever seeing the gap.  
  Change the size of the background Background () {bg .it ($ (window). Height () + 60); }

Comments

Post a Comment

Popular posts from this blog

c# - Textbox not clickable but editable -

-
I have a small form with 10 text boxes, I have set them in the correct tab order. I want them on my tab service I was wondering if there is a way to set the text box so that they can be selected for editing until they are tabbed. That is ... I do not want the end user to edit the text box to click on them, I just want to make them editable through tabu. this should do the trick public partial category poor text box: Text Box {Safe Override Zero WndProc (Ref: Message Message) {if (m.msg == (Int) WM.LBUTTONDOWN) {Return; // mount down events} base.WndProc (ref m); }} Window message enum can be found. How to do this without anherizing: text box : class EatMouseDown: netwindows {safe override zero WndProc (ref message message) {if (m.msg == (int) WM.LBUTTONDOWN) {return; } Base.WandProc (Ref M); }} Safe Override Zero Onload (EventEurge E) {base.OnLoad (e); How to do this without any part: left a clean part, whatever is important, this can be a buggy but it works R...
Read more

Matlab transpose a table vector -

-
An embarrassing simple question seems to be, but how can I move a Matlab table vector? aTableT = aTable '; I tried a standard syntax for the simple interaction of a line vector to a line vector aTable : ATableT = reshape (aTable, 1, Height (aTable)); and aTableT = rot90 (aTable); According to the head, the last time table should work for table, see. However, I get this error code: Error type in using table / permit (line 396) Undefined function 'permute' for the input arguments. Error in rot 90 (line 29) b = magnitude (b, [2 1 3: ndims (a)]); NB: fliplr is not useful either pretty sure I have covered clear angles - any ideas? Thanks! Try changing your table into an array, move it, then back to a table In other words, try doing this: aTableArray = table2array (aTable); ATableT = array 2table (aTableArray. '); I have also read the document for rot90 , and it says that rot90 is definitely working for tables Do, and I find you...
Read more

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

-
I have a SKScene where I am adding an SKSpriteNode I have subclassed the SKSpriteNode class to create this node. In the subclass I am defining some SKActions on Sprite. What do I want to do when the end of this phantom ends the SKAction sequence, then I add a new Prayer node to this scene. How is this possible. The following code is mine: The code for the sequence is that I'm running on the Scansprinitode subclass (TEMissileNode): - SKAction * moveDown = [SKAction moveToY: Self.position.y - 20 Duration: 0.2]; SKAction * animation = [SKAction animateWithTextures: textures timePerFrame: time / 7]; SKAction * moveMissileProjectile = [SKAction Moving: Pointoffscreen Term: Time]; SKAction * group = [SKAction group: @ [animation, movement projectile]]; SKAction * Sequence = [SKAction Sequence: @ [Hilldown, Group, [SKAction removalFromParent]]]; [Self run action: sequence]; From the main scene, I call those actions that execute these tasks TEMissileNode * missile = [tmissil...
Read more