new iOS 13 volume slider bug (CSS related?)

user_8579530 0
Viewed 1622

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&amp;stream=1000000.mp4%3FcSessionId%3DguestKey&amp;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.

ios13 updates volume iphone ios
1 Answers

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.

user_35468260
Related