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.
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!
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
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?
Post not yet marked as solved
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.
Post not yet marked as solved
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?
Post not yet marked as solved
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
Post not yet marked as solved
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?
Post not yet marked as solved
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
Post not yet marked as solved
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?
Post not yet marked as solved
We are deploying a .net Webapp and running it on iOS and Android devices. On iOS 15 and later, if the app is on the homescreen, then run, put in background and then come back, all inputs like datepicker and selects are not working anymore. So if you click on the select, nothing happens. A restart of the app helps, but if the app is set in background, the same happens again. I've read from others having the same problems, is there anything done against it? Also tried this for iOS 15.4 Beta 4.
At the moment we are asking our customers to use the app in safari and not on the homescreen to prevent the freezing.
One example input and select:
<input data-clear-btn="false" data-db-class="some_db_class" data-db-name"some_db_name" data-db-typ="date" type="date" id="some_id" value="" data-inline="true">
<select data-mini="true" data-inline="true" class="some_class"
<option value="-1">Auswahl treffen...</option>
<option value="0">Beispiel</option>
</select>
Post not yet marked as solved
I posted in the other but they removed it and told me to Post here but anyone know what might have changed or what new experimental feature was added to the list for safari the last two updates? I have been having massive slow or lagging and glitches with my games and safari after this last update. So trying to see which was was newly added.
Post not yet marked as solved
Hi,
We have recently noticed that the speech recognition API in Safari is extremely slow and inaccurate, specifically on iPhone 14 with iOS 16.1.1 … but works fine on iPhone 12 with the same iOS 16.1.1.
Does anybody else run into the same issue or have any suggestions?
Post not yet marked as solved
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.
Post not yet marked as solved
We use tailwind in our website.
The website doesn't load for safari versions below 14.
Is there any solution?
Post not yet marked as solved
Hi all,
I want to be able to query Google with the additional parameter '&lr=-lang_en' (what it does - prevents results in English from being shown).
The full url is looking as follows:
https://www.google.com/search?q=query&lr=-lang_en
In Safari version 16.4, and I think a few earlier versions too, Safari overrides query parameters and drops 'lr' completely. The URI Safari ends up fetching is:
https://www.google.com/search?client=safari&rls=en&q=query&ie=UTF-8&oe=UTF-8
I've tried entering the URI manually in the address bar and using the declarativeNetRequest API from my custom extension with no success.
Is there a way to make Safari 16.4 to request Google Search the way I want?
declarativeNetRequest rule I've used so far that also gets overriden:
await browser.declarativeNetRequest.updateDynamicRules({
addRules: [
{
id: 1,
priority: 1,
action: {
type: 'redirect',
redirect: {
transform: {
queryTransform: {
addOrReplaceParams: [{ key: 'lr', value: '-lang_en' }],
},
},
},
},
condition: {
regexFilter:
'^https://www.google.com/.*',
resourceTypes: ['main_frame'],
},
},
],
removeRuleIds: [1],
});
Post not yet marked as solved
I'm trying to use Web Codecs API to Decode HEVC stream(safari 16.4). However, when I configured the the Decoder like follow, it raise an rejection 'Config is not valid':
VideoDecoder.isConfigSupported({
codec: 'hvc1.1.6.L120.B0',
codedWidth: 1920,
codedHeight: 1080,
}).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) })
I wander whether Web Codecs is supported HEVC decode in safari version 16.4 or I select a wrong codec string?
Post not yet marked as solved
I have a SSL/TLS enabled website that is currently working well on Edge browser. Recently, we have been optimizing the website for Safari browser. However, our testing has shown that the ClientHello message always uses a new session ID to communicate with the server, resulting in frequent handshakes. Additionally, we have discovered that even when using HTTP 1.1 protocol, Safari does not send Keep-Alive reports.
Post not yet marked as solved
We are attempting to add the Smart App Banner to our website: https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
However we are not seeing the Smart Banner. We can't figure out why.
We'd like the banner to display for every page of our site with or without the app installed.
We don't require passing an app-argument at this time, it would be sufficient to only launch the app & open the app store. We will explore the app-argument feature later.
Is there any reason for the banner to not work in our test environments which are under different web domains from production?
This is our app:
https://tools.applemediaservices.com/app/1564944610?country=us
https://apps.apple.com/ca/app/techinsights/id1564944610
We are testing with Safari on iPhone(various)
Our site domain is https://library.techinsights.com
We have attempted a few iterations of the metatag.
<meta name="apple-itunes-app" content="app-id=techinsights, app-argument=/blog-viewer" />
<meta name="apple-itunes-app" content="app-id=1564944610, app-argument=/blog-viewer" />
<meta name="apple-itunes-app" content="app-id=1564944610" />
<meta name="apple-itunes-app" content="app-id=com.techinsights.app, app-argument=/blog-viewer" />
<meta name="apple-itunes-app" content="app-id=3ZQDXT3ZGB.com.techinsights.app" />
In case it is relevant our site has an apple-app-site-association file
{
"applinks": {
"apps": [],
"details": [
{
"appID": "3ZQDXT3ZGB.com.techinsights.app",
"paths": [
"/reverse-engineering/blog-viewer/*",
"/strategy-analytics/blog-viewer/*",
"/manufacturing/blog-viewer/*",
"/processor/blog-viewer/*",
"/market-segments/blog-viewer/*"
]
}
]
}
}
