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'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:
body{
-webkit-overflow-scrolling: touch;
}
However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.
I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.
Any tips?
Further info
Ok, it "kind-of" works like this:
html, body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position:relative;
}
however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?
Anyone having any input on this?
Fiddle:
http://jsfiddle.net/nMxEg/1/
Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.
<div id="fixedheader"></div>
Unfortunately, iOS doesn't have full support for fixed.
http://caniuse.com/css-fixed