Hi All,
I am having some issues with my website font on safari. It is showing the correct font, but it appears too bold. If I zoom into the site the font then appears correct but at full screen it is showing very bold.
Any ideas what the issue could be?
Kindest
Liam
Safari
RSS for tagSafari is the web browser developed by Apple and built into all Apple devices.
Posts under Safari tag
200 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Safari 17.3 - Where did Menu Item Develop: 'Disable Java' go?
Is there a method to re-enable it?
Steps to Reproduce:
Open Safari browser on an iOS device.
Navigate to a webpage requiring OTP input for authentication.
Request OTP and wait for the SMS containing the code.
When the SMS is received, Safari browser attempts to read the OTP automatically.
The suggested OTP is displayed, and upon selecting it, the browser navigates to the previous screen or page.
The navigation triggers the current screen button, preventing the entered OTP from being applied.
IOS version: 17.0.3
Expected Behavior:
After selecting the suggested OTP, Safari should not automatically navigate to the previous screen/page, and the entered OTP should be successfully applied to the authentication process.
Actual Behavior:
Safari browser on iOS automatically navigates to the previous screen/page after selecting the suggested OTP, preventing successful entry of the OTP.
Since iOS 17.2. the video player in Safari becomes black if I jump forward in a HLS video stream. I only hear the sound of the video. If I close the full screen and reopen it the video continious normally.
I checked if the source meets all the requirements mentioned here and it does.
Does anybody have the same issue or maybe a solution for this problem?
I was wondering if anyone else ran into a similar problem. We have an universal link that leads to out iOS application. If we use the link by itself everything works properly.
On to the problem. We run some campaigns that utilise universal links to redirect users to the application directly from the email. The emails are using click tracking, which means that they put the universal link behind another link.
So it goes like this:
User clicks link in the email
User gets redirected to click tracking link
User is redirected to the universal link
Expected: App opens; Actual: User gets too many redirects error.
The weird thing about this issue is that if, after clicking on the link from email app, user chooses to open link in Safari, they get too many redirects. But if they choose Open In Default Browser (which is also safari btw) then it works and opens the app.
Any help here will be much appreciated since we tried everything we can think of and this problem still persists.
Hi,
We are facing an issue in our page , The same works fine in other operating systems like android and windows.
we are facing this issue only on IOS and MAC(safari browser alone ).
We have a loader with us ,which will be shown in 2 different phases in our page. The first time loader will be shown while page is being loaded, the second loader will be shown once the user clicks on pay button.
the first loader is not giving any issues for us .But the second loader is not loading completely as you can see in the attached not working image ,the blue circle is being displayed only a 5-10%. It should start from 0 and gradually should reach 100% and again a loop.
From the analysis we could see the loader rotates fine after clicking pay button ,but once after page is submitted the issue happens
document.paypage.submit(); (code attached below) // this is the form submission in our page // once the control reaches this line we could see the loader is not working fine.
the same scenario is checked in android ,but even after page submission the loader works fine, Only in IOS and mac we are facing issue in (safari in mac other browser works fine without any issue), (all browsers in iOS).
please direct us to solve the issue
Attached images of working and not working scenario
Not Working
Working
Code sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader</title>
<style>
.loader {
position: relative;
margin: 0 auto;
width: 100px;
&:before {
content: "";
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 3s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.background-ring {
fill: none;
stroke: rgb(227, 226, 231);
stroke-width: 5;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
30% {
stroke-dasharray: 95, 200;
stroke-dashoffset: -30px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes color {
100%,
0% {
stroke: rgb(14, 236, 218);
}
40% {
stroke: rgb(14, 236, 218);
}
66% {
stroke: rgb(14, 236, 218);
}
80%,
90% {
stroke: rgb(14, 236, 218);
}
}
body {
background-color: var(--white);
}
.showbox {
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5%;
}
</style>
</head>
<body>
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<!-- Background ring -->
<circle class="background-ring" cx="50" cy="50" r="22" />
<!-- Loading circle -->
<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" />
</svg>
</div>
</div>
</body>
</html>
what happened? i never noticed it until i decided to use ipad air and pro as option in chrome dev console mobile view as well as ios simulator.
it works ok in the ipad mini.
touch events do not get triggered. instead, the scroll seems to overlap these.
EDIT: Solved. please see comment below.
While it works ok in ipad pro devices now, I still wish this could work out in chrome's dev console ipad pro view. the behavior is different with click events.
instead of mouse down, it starts with mouse move. what gives? this only happens in ipad air and pro view in the device toolbar in dev console.
It didn't happen before upgrading to iOS 17. I can't find any posts about this yet so I post this one.
On any browser(Safari, Chrome, Edge, ...), you activate the fullscreen mode of the video.
And with dev console, or you add the event listener to "play" event, you run video.load() 2+ times.
Then the size of the video is not as fullscreen.
You can see this on Twitch because they use video.load() on their live streaming service so that they show the live moment of contents to users every time users hit the play button.
When I pinch to zoom in or out or deactivate fullscreen mode, it gets back to fullscreen size.
Has anyone experienced the same thing??
I'm trying to add a warning to my web page if the user tries to leave the page while a form is still dirty (in the same way the Stack Overflow does, for example). I've followed the reference implementation of the beforeunload event from MDN like so:
function beforeUnloadHandler(event) {
// Recommended
event.preventDefault();
// Included for legacy support, e.g. Chrome/Edge < 119
event.returnValue = true;
}
var messageInput = document.getElementById('message');
messageInput.addEventListener("input", function(event) {
if (event.target.value !== "") {
window.addEventListener("beforeunload", beforeUnloadHandler);
} else {
window.removeEventListener("beforeunload", beforeUnloadHandler);
}
});
This works fine on all mobile and desktop browsers, including Safari on MacOS, however this doesn't work on Safari on iOS. Does anyone know why, and does anyone know of an alternative approach I can use on iOS?
When javaScript calls to navigator.mediaDevices.getUserMedia using {video: true, audio: true } constraints, throws an error:
error: OverconstrainedError
constraint: ""
message: "Invalid constraint"
name: "OverconstrainedError"
Same result when constraints has video: true and audio: false
You can test it easily opening the webRTC github samples:
https://webrtc.github.io/samples/src/content/devices/multi/
https://webrtc.github.io/samples/src/content/getusermedia/gum/
This works fine on IOS16
Hi. I have some Apple Script (below) that opens new Safari windows. How would I specify a particular Profile to use when opening the new window?
Thanks!
tell application "Safari"
set mydocument to (make new document at end of documents)
activate
end tell
It started happening about 6 months ago, I'm using the latest Safari Version 17.2.1 (19617.1.17.11.12)
Below are my privacy settings
I've tried creating a new user on the Mac and using that, and still does it. I've tried resetting all developer settings on the browser and still does it.
It's quite frustrating as I keep losing my work, specially on Shopify, I hit save and the browser is logged out.
I need a solution for this, there are posts here from years ago of people with similar issue and no solution from Apple.
In one of my project I am using Nginx server to host my apps and recently add Content Security Policy to skip inline CSS, in file CSS and JS script. I write the following code in my Nginx configuration:
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; media-src 'self'; form-action 'self'; frame-ancestors 'self';" always;
What is the problem?
In the login page, after successfully login, I redirect the user in the OTP entry page and send an OTP to the user mobile using SMS. When there is an OTP in SMS I notice the OTP code is suggested in the center of the top row of the keyboard (some sort of auto clipboard), normally if we select the OTP code, it typed in the relevant input field. But in this case it reloads the page rather copy-paste the code.
When I manually copy and paste the code on that time there is no reload. Just when trying to paste the code while there is an SMS and the keyboard shows the code to paste.
This is working fine in Windows PC browser, Linux browser, Android OS browser, even other browsers in iOS, but the problem raise when I tried to use the app in Safari browser.
If I disable the Content Security Policy then there is no issue with Safari.
Does anyone help me to figure out what maybe the root cause that trigger Safari browser to force a webpage to reload while trying to paste a code from Clipboard?
Thanks
I have a menu bar which overlays a body scroll in my PWA with styling:
position: fixed;
bottom: 0px;
This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use.
The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)).
On scroll down
With the dialog open
This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML:
Create a PWA app on a iOS17 device with the following html:
https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html
Open the app and open and close the dialog a few times.
Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog.
Eventually you will see the bug.
I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use.
Thank you!
I'm using standard Safari Web Push, but my notifications aren't coming through. I'm trying to debug this.
Is it possible to use the Apple Push Notifications Console to debug/analyze Safari Web Push deliverability?
I can't figure out how to use it for web push. When I login and try to use the Push Notification Console, it asks me to choose an "app." But for standard Safari 16+ Web Push, there is no "app," no "Website Push ID", etc. that I register with Apple. So how can I use the Push Notification Console for this?
Apple's documentation does strongly imply that it should work.
Sending web push notifications in web apps and browsers:
To resolve an error, address the issue and resend your push notification request. For more information about the factors that impact the delivery of a push notification, see Viewing the status of push notifications using Metrics and APNs.
And that page is all about the Push Notification Console. So it must be possible somehow, right?
I am developing an app that uses a Web Worker to render on a canvas, using transferControlToOffscreen().
I need to load web fonts into the canvas for rendering some text, but they are not loading in Safari (testing on Mac).
I get the error :
Cannot load https://fonts.gstatic.com/s/zillaslab/v11/dFa5ZfeM_74wlPZtksIFYuUe6HOpW3pwfa0.woff2.
Failed to load resource: Cross origin requests are not allowed when using same-origin fetch mode.
This works fine in Chrome and Firefox.
The fonts return the "Access-Control-Allow-Origin" correctly, but in Safari the call isn't even made in order to check the access-control.
Is there a way to get Safari to make these requests and honor the access-control returned in the header for the font?
If not, is there a suggested work around in order to load web-fonts in a Worker context?
Hello,
I'm creating a WebSocket connection to my server from the safari browser via console tab like below.
let socket = new WebSocket('wss://localhost:1200/WS_TEST?client=123&session=1234');
socket.onopen = function (event) {
console.log('WebSocket connection opened:', event);
};
socket.onmessage = function (event) {
console.log('Received buffer', event.data);
};
Once the connection established, The server sends multiple data which includes text and binary data.
When the server sends binary data more than 10KB after sending text data in the same socket, the WebSocket connection is getting failed.
EX:
Frame Type(Text): "Hi"
Frame Type(Binary): just binary frame of size 11KB
When the server send the binary data alone, the connection is not affected even the size is more than 100KBs
EX:
Frame Type(Binary): just binary frame of size 100KB
Hey,
Is it possible to automatic install AppStore extension on Mac clients without interaction from the user?
We have a lot of users who don't have an Apple ID. And as we have quite a lot of freelancers and temporary workers we mostly have users without an Apple ID and find it not making sense for these users to create an ID.
Any ideas?
Thanks.
I understand that fully immersive experiences, Quicklook using USDZ, and the newly adopted element tag for 3D objects are all supported in WebXR in Safari on Vision OS.
What about Mixed Reality in WebXR? Meaning augmented reality experiences seen using passthrough on the apple vision pro where you can see your environment in combination with the webXR experience. (not fully immersive)
Can you run full webXR experiences in passthrough mode? Or just view 3D models.
Animated AVIF is rendered slowly on Safari
Tested with MacBook pro (16" 2019) and Safari (Version 17.0 - 19616.1.27.211.1) and also on several iPhone models (14, 15 Pro) (over BrowserStack)
When using macBook pro (16" 2019) with Chrome (Version 120.0.6099.129) it is rendered OK
example for 720p@25FPS:
https://res.cloudinary.com/yaronshmueli/image/upload/cases/animated_AVIF_Apple/world_flight_fast_decode_tile_clmn_btiolg.avif