I'm noticing an odd effect in jQuery Mobile when viewing a page's background image on a low resolution screen (or resizing your browser's window to simulate a small screen). When navigating to a page with a background image, the image appears near the bottom of the screen for a split second, before "jumping" up to the center of the screen (it should appear in the center of the screen right from the start).
I set up a fiddle to demonstrate what I'm referring to. To get the full effect, first resize the fiddle "Result" window (bottom right of the screen) to where it's approximately the size of the div with the red background. Then click on the "Image page" button.
http://jsfiddle.net/FgVz8/3/
What causes the background image to have this "jerky" behavior? And more importantly, any ideas how I can fix it?
It wouldn't be a big deal if it was just a single image, but I'm building an image gallery with back/forward buttons, and every single image (each on a separate jQM "page") that is navigated to exhibits this strange effect, so it makes for a rather "unsmooth" user experience... especially when viewing multiple images one after another.
Any help is greatly appreciated!
Edit: it looks like Stack Overflow won't let me link out to JSFiddle unless I also post my code here, so here's my code...
HTML body...
<div id="home_page" data-role="page">
<div id="content" data-role="content">
Image page
</div>
</div>
<div id="image_page" data-role="page">
<p>Test 123...</p>
</div>
CSS...
#content {
background: red;
width: 200px;
height: 250px;
}
#image_page {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/2000px-Logo_Google_2013_Official.svg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Related
We are developing a slightly bigger solution using angular - and currently cordova for our native builds (we will change that soon).
In our App we have multiple Input fields. When focused the complete site automatically gets shiftet towards top to display the input field properly - that's the standard behavior of iOS/Safari as far as i am aware of.
Our Problem is that, sometimes, when we enter the input field the page gets shifted a bit too much towards the top. (the amount of shifting is completely random but always relatively small)
So if we leave the input the complete html-tag is slightly offset and there is a space between the bottom of the display and the html-tag itself.
The html-tag itself keeps it size, so its leaving the screen on the top-end.
I have added a red border to the html-tag to hopefully make it more clear:
how it should look (red border at the top is visible)
shiftet html bottom 1 (red border at the top is not visible anymore)
shiftet html bottom 2 (red border at the top is not visible anymore)
Basic html structure
<html>
<head>
...
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no">
...
</head>
<body>
<app-root>
<home-component>...</home-component>
</app-root>
</body>
</html>
css:
html {
height: 100%;
float: left;
display: block;
border: 2px solid red;
}
body, app-root {
display: block;
}
home-component {
display: flex;
flex-direction: column;
height: 100%;
height: -webkit-fill-available;
}
If I add a margin-top to the HTML tag, I can slide it down far enough. If I set the margin-top to a negative number, the HTML tag will align itself correctly again.
I have tried several things now including absolut positioning, playing around with vh, px, %, etc. or the reworking of the whole html/css structure. Also i checked the meta viewport (see html snippet).
Perhaps I should add that we don't move or animate any elements via js or css and that scrolling is only allowed in certain components in our solution
On the android devices or as a pwa the app works flawless. So i think it must have something todo with the virtual keyboard of safari/ios.
This problem is driving me nuts ... i hope someone can help me or direct me into the right direction.
So this is my first question here on stackoverflow, so please dont tear me apart ;)
After updating my iPhone 8 Plus to iOS 13, i noticed a weird behavior with the new volume HUD on my website. The new volume HUD won't disappear after interacting with the volume buttons. It shrinks to a simple bar, but never disappears completely. only happens in some webpages where i have a fixed view, no vertical scrolling. Can it be related to a CSS rule? As soon as i hit "back", or go to another page that has the vertical scroll enabled, the volume HUD disappears as it normally should. Anyone else had this issue? If you did, what caused it and how did you solve it? It's terribly annoying as the new position of the volume HUD covers a bunch of controls in those webpages that i noticed the issue in, so need to find a solution to fix this aswell as keep things functional for iOS12 or lower users.
another issue i noticed with iframes, those that were supposed to be scrollable in this format:
<div style="overflow-x:scroll">
<iframe >
...
<video></video>
</iframe>
</div>
in ios12, the iframe used to be the same width as the video it contained, let's say 1200px width, and on mobile i was able to scroll the iframe horizontally, and focus on the part i wanted. in ios13, the width of the iframe is that of the device, meaning i cannot scroll it horizontally anymore.
I have a temoporary fix in place, using jQuery i get the video's width and apply it to the iframe, but this causes new issues and i want to go back to the way it was. Why is the iframe different in ios13 than it was in ios12?
Thanks
Already trying to remove CSS rules one by one and see which causes this, but no luck so far. looking at removing overflow:hidden rules aswell as -webkit-overflow-scrolling rules to see if this is related, only ones i can think of that might have anything to do with it. Or maybe a meta tag? ? But this one is added on every webpage on my website, so not it.
Expected result: normal behavior, volume HUD disappearing after interacting with it anywhere.
iframe scrollable without requiring jQuery to set a fixed width to the iframe
EDIT:
the block of code that causes the issue. removing the block will clear out the issue. so my guess is still something regarding css rules.
<div id="webcam" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;position: relative; background-color: black;">
<video id="h5live-webcam" type="application/vnd.apple.mpegURL" playsinline="true" src="https://stream01.****.com:443/h5live/http/playlist.m3u8?url=rtmp%3A%2F%2Fwowza02.****.com%aaabad&stream=1000000.mp4%3FcSessionId%3DguestKey&random=142989" style="width:initial; margin:0px; transform:none; height:100%; width:initial;"></video>
<div id="middleView-webcam" style="width: 83px; height: 83px; position: absolute; left: 50%; top: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 1000;">
<canvas id="loadingSign-webcam" style="z-index: 1001;"></canvas>
</div>
</div>
UPDATE 2: issue is related to NanoPlayer and playback options (muted, automute etc.) . haven't solved yet, but narrowed it down.
iOS 13 changed the behavior of iframes. They used to not scroll and expand to fit content (flattening). They now work like all other browsers. Applications which worked around the iOS iframe scrolling issue with the scrolling DIV may be impacted. Trying to find out if there is a way to revert this DISABLING FLATTENING OF FRAMES via configuration so that iOS 13 can behave like pre-iOS 13. It is a huge message.
See the release notes for iOS 13 about removed features:
Disabled frame flattening on iOS. Frames now render in the same way as
a desktop browser.
Bug information listed in bugzilla.
I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?
When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>
After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew
Facing an issue in iPhone, creating a chatting web application. Having chat window on pop-up fixed position. when click on text input to send message, iPhone keyboard open it and shift the header part of chat section to top
Need to fix
Header and text-area should always be visible same as in whats-app
Set header-part to fixed position and same text-area on fixed, even keyboard is open or not
Prevent this shifting of header on top means prevent the iPhone scroll
Note: It is working fine in Android phone. Only issue with iPhone browsers, may be due to iPhone scroll.
Here is a simple conceptual example :
<article class="pop-up">
<h3>Title</h3>
<div class="content"> <p>Some scrollable content ...</p> </div>
<div> Some CTA buttons that should be visible for the user </div>
</section>
CSS:
.pop-up {
position: fixed;
// some other styles to display it as a popup
}
.content {
position: relative;
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}
Here's my fiddle:
*Updated to look nicer: http://jsfiddle.net/fmYpE/1/
<div class="block">
<img src="//placekitten.com/240/240" alt="Kitty" />
<div class="block-overlay">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
.block { position: relative; }
.block-overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.block:hover > .block-overlay { opacity: 1; }
In iOS, and potentially other touch devices, if you tap on the image where a link is hidden the link will be registered as a click and you'll be redirected.
I need a way to prevent this from happening somehow. In my actual code I have a square image and hidden below it you'll see user data from a social sharing website: username, avatar, status update etc.
These are full of links. I'd like to be able to tap the image and have the overlay div transition position:absolute over the image then be able to tap/click the links and not follow them before the transition has completed.
I've tried a combination of pseudo classes, :focus, :active, also tried with Modernizr, .touch, .no-touch.
I stumbled across this article here but they only spoke of static text, not links...http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ (Scroll to the Conclusion paragraph)
Any help is always very much appreciated, thank you.
A colleague made me aware of the CSS property: pointer-events.
I was able to set the overlay div with pointer-events: none. With a few lines of jQuery I set pointer-events back to auto with a slight delay to accomodate the css transition.
Works great.