In my PWA app, I utilize the getUserMedia() API for accessing the camera and also employ HTML audio tags to handle various types of media content. However, since updating to iOS 17, I've encountered an issue where, after granting permission for camera access, audio playback occurs through the earpiece instead of the media speaker. This problem is specific to iOS 17; earlier iOS versions work as expected.
My app is developed using a stack that includes JavaScript, Angular, Ionic, HTML5, and CSS. Can you please provide guidance or a solution to address this issue and ensure that audio plays through the media speaker when using the camera on iOS 17?
CSS
RSS for tagCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Posts under CSS tag
34 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Every now and then I need to make a website. And I noted in my last project that background-attachment:fixed; is still not supported by iOS. It
is by Safari on MacBooks, so I'm wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser's canvas? Because doesn't playing video cost a multitude of that?
Hello,
I have an Iphone XS with iOS 16.6 and I'm developing a website using NextJs (13) and React (18) where I have a sliding text from right to left. I can see it everywhere but on my iPhone, this is the code
.slider-container {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
height: 200px;
}
.slider-container span {
display: inline-block;
padding-left: 100%;
animation-name: slideLeft;
animation-duration: 36s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: slideLeft;
-webkit-animation-duration: 36s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.slider-container-2 span {
animation-delay: 18s;
-webkit-animation-delay: 18s;
}
@keyframes slideLeft {
0% {
transform: translateX(0);
-webkit-transform: translateX(0);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
``` can you help me?
Hello!
I am someone who creates websites.
When I click a link within an iframe, the screen briefly turns white.
(This link navigates within the iframe, and the parent frame does not navigate.)
I haven't specified any background-color or styling within the iframe, including the body.
However, it turns briefly white during the transition, probably due to a rendering issue.
This issue doesn't occur on other devices (android).
Can this be resolved with CSS, or is it a bug?
PC
MAC OS / 13.4 (22F66)
Safari / 16.5 (18615.2.9.11.4)
iPhone
IOS / 16.1.1
Safari / unknown
iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177
I create a simple html and try to run on iPad. Although I set the height to 100vh, there is a vertical scrollbar on the right, and I could scroll down to a total empty page. It seems like the total height is more than 200vh.
The web page works on Safari, but not work in iPad chrome.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>
css:
body {
height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: 100vh;
height: -webkit-fill-available;
}
On Safari of iOS 17 and macOS Sonoma, I am encountering a layout problem where the .content element seems to be covering the .header element, resulting in unexpected rendering. This issue is not consistently reproducible across different devices or browsers.
Here's the HTML and CSS structure:
demo
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<style>
.page {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
.container {
height: 100%;
width: 100%;
overflow: auto;
}
.header {
position: absolute;
top: 0;
background: lightblue;
height: 50px;
width: 100%;
}
.content {
height: 2000px;
background: lightcoral;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>
If remove overflow in .page, or make .content not scrollable, .header shows correct that overlap .content
Safari is returning 0 for --safe-area-inset-bottom when I use getComptutedStyle method on Iphones running on ios +15 both on portrait and landscape mode when the toolbar is hidden.
I can guess that it's desired when the address bar is on the bottom and is hidden, however, is it supposed to return 0 when the address bar is set to be on the top (like on the ios versions -15) and the toolbar is hidden? Is it intended or an overlook from Safari?
Comparison between versions:
Safari ios14 hidden top toolbar portrait --safe-area-inset-bottom : 34,
Safari ios14 hidden top toolbar landscape --safe-area-inset-bottom: 21
Safari ios 15+ hidden top toolbar portrait --safe-area-inset-bottom : 0,
Safari ios 15+ hidden top toolbar landscape --safe-area-inset-bottom: 0
I have an IOS app with a Web View. The website have a fixed header and footer. Since the update to 14.4.1 the header is pushed down, and the footer becomes invisible when the page is scrolled.
Hi everyone,
I am having a problem that only happens in Safari that is really weird. I tried to google it but I didn't find any information regarding this so I was hoping that someone could help me here.
I have a site that supports dark and light theme, and when I switch from dark to light or vise versa the background-color on the body doesn't change. I saw on the dev tools that the rgb on the computed changes but on the screen it stays with the previous color and needs a refresh to change to the correct color.
Can somebody help me?
Thank you in advance!
Device: iphone, ios 16
Software: safari
Steps to reproduce:
Go to https://ig.ft.com/filipino-fishermen
Zoom in so that the content is bigger than the screen
Problem: white text from lower down the page appears erroneously on screen.
Context: The white text is position fixed. It is hidden inside a parent container using clip-path: inset(0) on the parent container. This works correctly at normal zoom, but the clip-path appears to be ignored when the user zooms in on mobile safari.
Issue specifically happens with IOS16.4 and above (both on Chrome and Safari). The same code works across all other browsers and IOS 16.3 and below as well.
Below is the CSS code for the card flip (backside of the card)
-webkit-transform: rotateY(-180deg) translate(100%, 0);
transform: rotateY(-180deg) translate(100%, 0);
When the card is flipped, on the backside - no clicks were clickable. translate(100%,0) is the culprit after debugging for many hours. I am not sure what is the alternate solution and/or why this started failing only from iOS16.4 and above.
Any insights to this issue would be highly appreciated as I spent way too much of time troubleshooting this stupid issue.
Under iPadOS 17 beta the Web content with below CSS does not display in safari but iPadOS 16.5 does. Could you please help understand and how to fix it for iPadOS 17? Thanks in advance!
<html><head><title>111111111111</title></head>
<body style="display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;">
<p style="display:inline-flex;">1</p>
<p style="display:inline-flex;">2<em>3</em></p>
<p style="">4</p>
</body></html>
Under inspector:
Under iPadOS 16.5 in safari, the text displays:
However under iPadOS 17 beta, the page is blank and the text does not display:
Hey,
I read the guidelines of the App Store and saw that repackaged website will be declined.
Buts, an ionic application is basically a wrapped website and PWA as well.
So I don't really understand the guidelines.
Is there someone or somewhere I cam message to ask and get a formal answer?
Thanks in a advance.
I am Web developer, and I needs multiple screen layout things, it's obvious that all the web browser supports debugging, inspection, and responsive mode, and it's enough for web frontend developer, but currently I notice that CSS is not working in safari, as it working in Google Chrome, because earlier both works parallel and similar.
I tried using clear cache and history, which works earlier, but this time not.