Post not yet marked as solved
On a Mac, Safari shows the wrong font for text drawn in an html canvas element when the font is embedded using @font-fase and a base64 data URI. The embedded font shows up fine in the body of the html (i.e. not in a canvas). Using the embedded font in a canvas element works fine with Chrome and Firefox.On an iOS device, the embedded (base64 data URI) font shows up fine in the html body, but not in a canvas element on all three browsers - Safari, Chrome and Firefox. Is there anything that I can do to fix this? Thanks.
Post not yet marked as solved
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?
Post not yet marked as solved
::-webkit-scrollbar-thumb does not work in iOS 13 devices, Need to change thumb colour from black to white for dark background.
Tried below solution but not working.
::-webkit-scrollbar-thumb {
background: white;
}
Any suggestions.
Thanks
Post not yet marked as solved
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
Post not yet marked as solved
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.
Post not yet marked as solved
Using foreignObject in svg will cause the element display to be misaligned, is this by design or has this bug itself, and if it is a bug itself, is there a plan to fix the problem?
Post not yet marked as solved
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.
Post not yet marked as solved
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.
Post not yet marked as solved
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:
Post not yet marked as solved
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.
Post not yet marked as solved
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.
Post not yet marked as solved
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!
Post not yet marked as solved
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
Post not yet marked as solved
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;
}
Post not yet marked as solved
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
Post not yet marked as solved
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?
Post not yet marked as solved
I’m talking about CSS-functions: https://w3c.github.io/csswg-drafts/css-values/#round-func)
.example {
--result: round(up, var(--number), 1);
}
In Safari 16.x css round didn’t work perfect.round(up, x, 1) did its job, if x wasn’t a “natural” number (all digits after the fraction mark 0). If it was, it resulted the next one!
Now Safari 17.0 gives 0 for all numbers!
!Update!
Sorry, Safari 17 does round! But: not in code like that:
:root { --result: round(up, var(--number), 1);
Had a project, where this was used to define the number of columns and rows I wanted for an (mostly) quadratic layout.
What’s working instead:
grid-template-columns: repeat(round(up, sort(var(--items), 1), minimal(…);
the former css used the :root-variant (grid-template-columns: repeat(var(--result) …).
!Update 2!
After some experiments I found: Safari 17 doesn’t like :root any more! (https://www.w3.org/TR/selectors-3/#root-pseudo)
And: Safari doesn’t calc correct: `round(up,1,1)˚ is 2 — says Apple. YOU MUST NOT CALC CSS-INTEGERS! CSS-DPI ist ####### ENOUGH!
Post not yet marked as solved
After migrating from iOS 16 to 17, Safari does not show svg icons. On devices with iOS 16 they are displayed
Post not yet marked as solved
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?
Post not yet marked as solved
CSS based dark mode / light mode changes are not being applied to websites installed to homescreen as PWA (Webapp).
Changing dark/light mode does not immediately change the displayed PWA style. A restart of the webapplication is required for the css to take effect.
While in the browser the css is being applied immediately as expected.
This bit only occurs on iOS 17. iPadOS and OSX work as expected.
Example:
https://whatpwacando.today
