hi there,
I just tested it on iPadOS 14 - issue remains:
Mobile safari started rendering embedded PDFs as images. This is problematic both when viewing and printing:
when viewing, only the first page of the PDF is displayed
when printing, the picture gets printed, leading to incomplete and blurred printing
In both cases the user does not understand the problem is on mobile safari and either does not see/ print the remaining pages or complains about broken PDFs.
The only workaround currently known to me is to provide a download-link that will show the PDF as full page (no embedding). This way the PDF is rendered with multiple pages and printed correctly.
The problem with this workaround is: if the user places the webapplication on the home screen (so it is opened in fullscreen), downloading the PDF as described in the workaround puts the user in a navigation dead-end, as he will not be able to navigate back.
This is an awful situation. The platform is powerful enough to simply embed PDFs in the page. Safari is obviously capable of handling PDFs, as shown with the workaround.
Please fix this. Or do not show PDFs embedded at all, at least user will direct its complaints at Apple and not to us web developers.
Safari and Web
RSS for tagEnable web views and services in your apps.
Posts under Safari and Web tag
121 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Hey Developers! I love web design and am trying to test out some CSS, I am currently using a MacBook Pro 13" (2020 Version), I only use Safari and I want to know if I'm able to simulate other devices like a Windows 10 PC, an Android phone, an iPhone, or an iPad. I do own an iPhone and iPad but wanted to do it all on my Mac, I've tried searching for Safari extensions to do this but so far I haven't found one. If you could give me some suggestions or a link to what I should use it would be appreciated.
Thanks,
Mateo
I am trying to run JavaScript only after the page has loaded, and according to here - https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage, I should use DOMContentLoaded. However, it does not seem to work.
This is my content.js file:
function runOnStart() {
document.addEventListener('DOMContentLoaded', function(e) {
document.body.style.background = "rgb(20, 20, 20)";
document.html.style.background = "rgb(20, 20, 20)";
var divElements = document.body.getElementsByTagName('div');
for(var i = 0; i < divElements.length; i++) {
let elem = divElements[i];
elem.style.background = "rgba(255, 255, 255, 0.05)";
}
});
}
runOnStart();
If I take the code outside of the event listener, it runs fine, but a lot of the elements haven't loaded in yet so it doesn't work as it should.
The function is definitely running, but the event listener simply doesn't work. I appreciate any help you can give!
::-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
We are creating a watch party app that allows you to video chat with your friends and play a YouTube video at the same time. The video is played using Google's youtube-ios-player-helperlibrary which uses a WKWebView with their iframe API, as that's the only way to play it without violating the Terms of Service. We need the ability to change the volume of the YouTube video separately from the video chat, so you can hear your friends over the video for example.
Unfortunately it's not possible to directly change the volume because iOS does not support changing the volume via JavaScript - https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10, unlike macOS. Setting volume doesn't do anything and getting it always returns 1. Users can change the volume with the hardware buttons but this applies to all audio including the video chat, not just the YouTube video.
Someone found a workaround - https://stackoverflow.com/a/37315071/1795356 to get the underlying AVPlayer and change its volume natively. This worked with UIWebView but does not work now that it uses WKWebView.
What can be done to change the volume of the YouTube video?
All of my third party extensions have blue icons now, in Safari 14.0. It looks pretty awful.
Is there a way to keep the monochrome colors or a way for us, as developers, to provide a different kind of icon to sustain the monochrome colors for our extensions?
I am assuming the blue color denotes something, like the extension being "active". I wasn't able to find documentation on this change nor any related api doc.
I'm trying to record my screen (canvas) on iPad safari with the new experiential media recorder support.
I got the mediaRecorder object and it triggers the start event but the issue is whenever mediaRecored record blob it will not trigger the stop event.
It is working fine of MAC Safari but on iPad Safari I'm getting this issue.
Is there any ways to get the stop event so mediaRecorder fire ondataavailable method after stop on iPad Safari?
I would like to know on a mdm managed supervised device, how to force use Safari if a user has non-safari browser set as default.
can enforcing safari for a domain or web clip be done?
even shortcuts now, when using safari it opens whatever is set as default browser. Ironically if same simple shortcut of open URL with Chrome is created it opens with Chrome, regardless if default browser is set to firefox for example
this default browser setting is great for personal use but cause issues now for corporate use for me
anybody else figure this out? Also affects certificates for our managed devices
I am trying to implement Quick Notes through SwiftUI, rather than UIKit or AppKit. I am unsure if the behaviour below is expected, or due to a bug.
I have already successfully implemented NSUserActivity for Handoff, Spotlight and Siri Reminders, using the .userActivity() view modifier. These NSUserActivity instances use the NSUserActivity.userInfo dictionary to store and correctly restore the content through the .onContinueUserActivity(perform: ) methods.
Quick Notes requires using the .persistentIdentifier or .targetContentIdentifier properties, rather than the .userInfo dictionary alone. However, when I set these either of these to unique identifiers using the code below, they are not correctly stored within the useractivity.
MyView()
.userActivity(ActivityString, updateUserActivity)
private func updateUserActivity(_ activity: NSUserActivity) {
activity.isEligibleForSearch = true
activity.isEligibleForHandoff = true
activity.title = "Title"
activity.targetContentIdentifier = myItemUniqueID
activity.persistentIdentifier = myItemUniqueID
activity.userInfo = ["id": myItemUniqueID]
print(activity.targetContentIdentifier) // Correctly prints
print(activity.persistentIdentifier) // Correctly prints
print(activity.userInfo) // Correctly prints
}
The identifiers print correctly when setting the user activity above. However, when restoring the user activity (tested through Handoff and Spotlight Search), the targetContentIdentifier and persistentIdentifier strings are empty.
MyView()
.onContinueUserActivity(ActivityString, perform: continueUserActivity)
private func continueUserActivity(_ activity: NSUserActivity) {
print(activity.persistentIdentifier) // Nil
print(activity.targetContentIdentifier) // Nil
print(activity.userInfo) // Correctly prints
}
Is there something else I must do, or is this unexpected behaviour?
I would like to create a web app where you can drag and drop emails from Apple Mail (on macOS).
When you drag emails to the desktop an .eml file is created, but when you drag emails to the browser no file is being transferred, I can only get the mail’s subject.
So is it possible to drag and drop emails from Apple Mail to browsers? And if yes, then how? So far I've tried chrome and safari, but neither got any files with the dragged element. On windows with outlook or thunderbird this wasn’t an issue, so I hope it can be done with apple mail as well.
Thanks in advance
According to the release notes of STP, OffscreenCanvas has been implemented for a while. However, when I run JavaScript code, it fails because OffscreenCanvas is not a recognized command. I feel I’m missing something obvious here. Any help?
Open music.yandex.ru
Open browser console
Paste this code:
navigator.mediaSession.metadata = new MediaMetadata({
title: "11111111111",
artist: "222222222",
album: "3333333333",
artwork: [
{ src: "https://avatars.yandex.net/get-music-content/5375761/c8e05100.a.19837155-1/200x200" }
]});
Open Now playing widget.
Title, artist, album is set correctly. Cover not set.
macOS 13.0.1 (22A400) Safari 16.1 (18614.2.9.1.12)
Note! In macOS 12.6.1 Safari 15.6.1 (17613.3.9.1.16) all works as expected.
We are currently exploring deferred installation using iOS universal links. Our web page includes universal links with specific user data that we want to pass to the app after first installation.
We are looking for suggestions on implementing a seamless transition from Safari to the app, where the device can be consistently and uniquely identified. Any insights or best practices regarding JavaScript-based fingerprinting, storing identifiers, and linking them to user accounts within the app would be greatly appreciated. Additionally, I'm interested in ensuring compliance with privacy regulations and maintaining transparent data collection practices. Thank you in advance
I have a PWA app installed on home page, and prompted user for notification permission. User granted permission, and I can see in the app section under System Settings that permission are effectively granted.
But when querying permissions, I am getting the following response for below queries:
Incorrect:
await navigator.permissions.query({name: 'notifications'})
>> { state: "prompt", .... }
Correct:
Notification.permission
>> "granted"
Any idea why the 2 are showing different values?
Hi all,
I have a PWA with notification system working well on any other device including MacBook.
But my customers start to complain that they don't receive any notification on their iphone.
I checked with a friend iPhone XR with iOS 16.5.1 installed on it. And it seems that web push notifications are still deactivated in the experimental features.
Is it normal? Did I mis something? Apple said they delivered webpush API on iOS16 but it's deactivated by default.
I can not ask my customers to go there to activate the option is it a solution to override this or do we still need to wait 10 years to get it activated?
Thanks in advance
We have been trying to implement OAuth 2.0 SAML Bearer Assertion authentication in our enterprise iOS application. We are not receiving the SAML Assertion id response in WKWEBVIEW. Can you please kindly confirm whether OAuth 2.0 SAML Bearer Assertion possible in NATIVE iOS development. Please suggest how this can be achieved in iOS native development.
After watching the WWDC 2023 “What’s new in web apps” session, I am unclear on current best practice for custom icons and custom splash screens in iOS PWAs (progressive web apps). Should we now use manifest.json entries, or the old link/meta tags way still?
Is there any Apple sample code for a PWA that, when added to the Home Screen on iOS, shows an app with custom icon and a custom splash screen compatible with all devices? The Configuring Web Applications documentation is marked as Archived. Is there a newer version?
Specifically, do we still have to provide a splash screen PNG for every possible device resolution? This is a serious burden and likely to break whenever a new device is released. It would be ideal if a splash screen could be synthesized by centering an icon on a background of a given color. I can’t get that to work.
When I updated Safari to version 16.5.2, I encountered abnormal image display on certain web pages, as shown in the attached image.
However, when I reinstalled the operating system (Monterey 12.6.6/Safari 15.6.1), the images on web pages returned to normal and the speed noticeably improved.
I'm currently working on a webRTC app and I noticed that there's no support for the Media Track autoGainControl property in Safari, per the Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings/autoGainControl#browser_compatibility
I don't have much Safari-specific experience so I'm a little confused. What's the reason behind this? Is there some built-in AGC on Apple hardware? Or is this just a completely absent feature in the Safari browser?
Hey,
I am loading a link on my app using SFSafariViewController and that link asking camera and location permission. Camera permission pop-up showing and accessible but for location permission it is not doing anything even not showing location permission pop-up.
I need to know is there any way to get location permission pop-up on SFSafariViewController.