Howdy!
On Safari, when using the column-count CSS property to split text into multiple columns, I've noticed that when applying a text-shadow, there is an unexpected whitespace created above all subsequent columns. I've put together a codepen demonstrating the issue and its reproducibility on Safari (using latest as of this posting: Version 17.6 (19618.3.11.11.5))
Codepen: https://codepen.io/cubepresser/pen/ExqvzjL
Expected behavior:
Actual:
I tested this on the latest versions of Chrome, Firefox and Edge. This bug does not occur.
Expected behavior is that there should not be an extra line added to the beginning of the second column, third column, etc.
Here's some code if that codepen link doesn't work:
HTML:
<p id="example">0000000000111111111122222222223333333333</p>
CSS:
#example {
font-family: monospace;
max-width: 20ch;
column-count: 2;
column-gap: 0;
word-break: break-all;
line-break: anywhere;
text-shadow: 0 0 4px black;
}
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
Hi all.
So, I built the platform SSO extension on a demo server I created and everything ran smoothly. I get the tokens at the end of the process.
Now, I want to use the tokens when I trigger my SSO extension in my domain from Safari.
I trigger my domain, get into the beginAuthorization method, get the request.loginManager?.ssoTokens and then want to return them to Safari by calling the request.complete method.
But, no matter what complete method I call (complete(httpResponse: HTTPURLResponse, httpBody: Data?) or complete(httpAuthorizationHeaders: [String : String]) where I insert the Bearer token into the Authorization header, it will not drill down to Safari or my server. The headers I try to send back are not moving from the extension to Safari.
Some knows why its happening?
Thank you for any help or suggestion.
I'm developing two native apps and one is a authentication app and other one is business app. In the main flow if buisness application is on the foreground and did nothing for at least 10 minutes it will automatically time out and redirect to the autentication app for token refresh. In this flow universal link redirect to the authetication app without opening Safari.
But if i execute the below flow buissness app redirect to the Safari.
Buisness App In Foregorund → Displaying a OS screen while app is in Foreground(Like Push Notification Center) → On this satate leave device for 10 minutes → Buisness app will automatically timeout and rediret to Safari(In safari 「NoSuchKey The specified key does not exist.」message is displaying but authentication app Universal link Start button is showing) → After click the Universal Link start button in Safari Authentication App open.
I use the below code to start the Universal Link:
if let url = URL(string: path) {
UIApplication.shared.open(url)
}
So i would like to know is there a special reason that when Displaying a OS screen while app is in Foreground(Like Push Notification Center) affect the normal flow of Universal redirection to another app?
Hello,
I can't figure out how to set the name of a Content Blocker in the Safari extensions list. So far, the Content Blocker name in this list is the Contaning application name.
I tried to set the bundle name in Info.plist and tried to locate Info.plist, without success...
Since I also bundle a Safari ("chrome") extension, I have two extensions in the list, and it would be fine to display a specific name for each to make it clear for the user.
I'm developing an application that utilizes WKWebView to display a webpage. My goal is to improve the performance and loading speed of this webpage by intercepting specific API calls and providing pre-stored JSON responses directly from within the app, ensuring the webpage renders instantaneously.
The challenge I am encountering is the inability to intercept HTTPS URL schemes directly from WKWebView. Any insights or solutions from the community on how to effectively manage and overwrite these particular network requests would be greatly appreciated.
When user opens a new tab and loads a website, the declarativeNetRequest.getMatchedRules() returns nil and on reloading in the same tab it returns the URLs blocked.
Is this an expected behaviour?
Hello.
I’m trying to use Core Location Service on any application in Mac (Safari, Maps, Weather, Chrome with Core Location configuration, or just trigger the API with a standalone app) and it seems that all of them constantly fail to provide the geolocation of my device because of the same error (kCLErrorLocationUnknown).
I'm using MacBook Pro (M3 Max) with Sonoma 14.7.
I’m sure the apps have access in the settings and everything is in order except the Core Location response.
I’ve tested the issue on multiple MacBooks and it reproduced 100% of the times on all of them.
Did anyone encounter a similar issue?
Hi,
I’m seeking information about the HLS protocol version supported in Safari on macOS. The official documentation only provides details about iOS support. Is there an official document that addresses this?
Best regards
Hi. I've noticed on both iOS 17 and iPadOS 16 that when an user opens a website in a WKWebview (e.g from Gmail), then requests it to be opened in the external Safari app (through the "compass" icon), their localStorage data is not transferred to the Safari tab.
This behaviour breaks web experiences that rely on data being locally stored, e.g auth tokens or user identification data. It effectively stops users from being able to use some websites outside of an in-app context.
I am aware of Webkit's tracking prevention mechanisms such as https://webkit.org/tracking-prevention/#partitioned-third-party-localstorage, but I don't think this should apply to this case. Here the user is navigating between two Safari tabs (one internal and one external) on the same domain, exact same URL, by pressing a native Safari webview icon. There is no third-party cross-domain tracking happening.
Is this a bug or intended behaviour?
I have noticed that tabs.onRemoved works differently in Safari 18 comparing to other browsers and Safari 17.
Open a tab e.g. apple.com
Take note of the active tab id using this code:
browser.tabs.query({currentWindow: true, active: true}, (x) => console.log(x[0].id))
Add a listener on onRemoved:
browser.tabs.onRemoved.addListener(console.log)
on the active tab, navigate to e.g. https://developer.mozilla.org
Take note of the active tab id again (using the same tabs.query).
Expect:
there should be no console.log of onRemoved.
the active tab id stays the same.
Actual:
there is a console.log of onRemoved.
the active tab id is changed.
Please help. If this is a bug introduced in Safari 18, it would break a lot of JS Web extensions.
I have a homepage with an iframe containing my app LocalStorage,
but when opening my app page the LocalStorage is lost.
structuration of the page:
homepage : domain.com
iframe and app : app.domain.com
the localstorage is set up directly within the iframe and postmessage between iframe and parent works.
We see in the parent page that the LocalStorage for the sub-domain is set but opening the sub-domain on a new window it disappears :
The problem is detected On Safari 18 only.
We used declarativeNetRequest.getMatchedRules() to retrieve the blocked URLs. While we do receive a list, we noticed that the URLs captured do not always reflect the ones the content blocker is actively blocking at that moment. However, upon reloading the same page, the correct URLs appear.
Screenshots are attached for your reference.
First load:
After reload:
I am encountering an issue where we are unable to run or launch Safari Driver in our automation tests using macOS. When attempting to run safaridriver -p 8888 from the terminal, we receive the following error message:
ERROR: safaridriver could not launch because it is not configured correctly or you need to authenticate. Re-run safaridriver(1) and pass the '--enable' flag to configure and/or authenticate.
For more information, consult the safaridriver(1) man page.
Despite running sudo safaridriver --enable as an administrator (even as root), the issue persists.
I’ve searched through various online forums and GitHub repositories but couldn’t find a working solution. Some references are:
Apple Developer Forum Thread: https://forums.developer.apple.com/forums/thread/762321
GitHub Issue: https://github.com/SeleniumHQ/selenium/issues/11381
Hi,
I noticed that event 'error' from EventSource is not fired in latest iOS 18, when web application is minimized and then re-activated. This was working in previous versions, so it is probably regression bug.
Behavior in iOS 17:
PWA application has active SSE/EventSource connection with server. Then some other application becomes active for more then ≈20 sec, so that SSE connection is closed. After SSE connection is closed, application is opened again. When application becomes visible, 'error' event is fired. This is expected behavior and this way also works on other non-iOS systems.
Behavior in iOS 18:
Following same steps as before it looks like that error event is not fired. Also,readyState of EventSource is 1 (EventSource.OPEN ), even if SSE connection is closed.
If connection is interrupted when application is in foreground, then error event is fired on both iOS versions.
This is quite problematic, because previously you could rely on 'error' event to trigger reconnection, when application becomes visible, but now this is not possible. Also EventSource readyState is 1, even if there is no connection to the server, so it is in wrong state.
Any thoughts?
I have noticed that storage.local.get API works differently in Safari 18 compare to other browsers and Safari 17.
browser.storage.local.set({abc: 123})
browser.storage.local.get(console.log) // {abc: 123}
browser.storage.local.get({abc: null}, console.log) // expect {abc: 123} but got undefined instead.
According to MDN, storage.local.get should work with an object with object names as keys and the default value as value.
According to Safari 18 Release notes, this may be related to a fix: 'Fixed getting an empty key from storage. (99440265) (FB11427769)'.
We are using declarativeNetRequest.getMatchedRules() to get the matched rules' URLs. When user switches website in the same tab, it returns URLs which were blocked in the previous website also, within past 5 minutes.
Is it possible to fetch getMatchedRules() only for current webpage in the same tab?
I need to play a Video with transparent background on our website.
It works perfectly on Windows, Mac & Android (in all browsers).
On iPhone however, no matter what Browser, The transparent parts of the video act almost like an "overlay", making everything behind it a lot brighter. This effect gets worse, the higher I set the iPhone screen brightness. This is of course not the behavior I'm looking for.
The Video Element has two listed sources. One .WEBM (VP8 with alpha channel) and one .MP4 (HEVC with alpha channel). I am sure, that something is wrong with the MP4 file, but I don't understand why it works in Safari on Mac, but doesn't on iPhone. Shouldn't they both play the same File?
Here is my workflow:
masking the subject in DaVinci Resolve
exporting as QuickTime - Apple ProRes 444 - "Export Alpha"
using Shutter Encoder (v15.7) to convert the file to H.265 (.mp4)
under "Advanced Features": Hardware acceleration to "OSX VideoToolbox" & check "Enable alpha channel"
also converting the first file to VP8 (.webm) with "Enable alpha channel"
then adding the Videos to the website like this:
<video height="450px" autoplay loop muted playsinline disablepictureinpicture>
<source
src="(url of the mp4)"
type='video/mp4; codecs="hvc1"'>
<source
src="(url of the webm)"
type="video/webm">
</video>
Here is how it looks on Safari (Mac)
This is what it looks like in any browser on iPhone
I have re-exported, re-converted and re-implemented it multiple times and I just can't get it to work on iPhone. Does anyone have an idea, what the cause could be, or what I can do differently?
I have an issue with web ads not working in Safari versions earlier than 16.4.
While debugging Safari Web Ads I found out that I don't get postbacks from versions 16.4 or below from Safari, although there are no technical limitations and the documentation says that web ads should work starting from versions 16.1 https://developer.apple.com/documentation/storekit/skadnetwork/skadnetwork_release_notes/skadnetwork_4_release_notes
For ads that appear in an app, the app is built with iOS 16.1 SDK or later. For web ads, the ad appears in Safari 16.1 or later.``
Maybe I missed something and Apple didn't update the documentation, is that normal?
Maybe it's related to this release and there was a technical problem with Apple? https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-16_4-release-notes/#SKAdNetwork
Has anyone encountered the same problem and how did you fix it?
Thanks!
We are encountering an issue where the Safari extension we are developing stops working while in use on relatively new iOS versions (confirmed on 17.5.1, 17.6.1, and 18). Upon checking the Safari console, the content script is displayed in the extension script, so the background script or Service Worker must be stopping. The time until it stops is about 1 minute on 17.5.1 and about one day on 17.6.1 or 18.
When it stops, we would like to find a way to restart the Service Worker from the extension side, but we have not found a method to do so yet. To restart the extension, the user needs to turn off the corresponding extension in the iPhone settings and then turn it back on.
As mentioned in the following thread, it is written that the above bug was fixed in 17.6, but we recognize that it has not been fixed. https://forums.developer.apple.com/forums/thread/758346
On 17.5.1, adding the following process to the background script prevents it from stopping for about the same time as on 17.6 and above.
// Will be passed into runtime.onConnect for processes that are listening for the connection event
const INTERNAL_STAYALIVE_PORT = "port.connect";
// Try wake up every 9S
const INTERVAL_WAKE_UP = 9000;
// Alive port
var alivePort = null;
// Call the function at SW(service worker) start
StayAlive();
async function StayAlive() {
var wakeup = setInterval(() => {
if (alivePort == null) {
alivePort = browser.runtime.connect({ name: INTERNAL_STAYALIVE_PORT });
alivePort.onDisconnect.addListener((p) => {
alivePort = null;
});
}
if (alivePort) {
alivePort.postMessage({ content: "ping" });
}
}, INTERVAL_WAKE_UP);
}
Additionally, we considered methods to revive the Service Worker when it stops, which are listed below. None of the methods listed below resolved the issue.
①
Implemented a process to create a connection again if the return value of sendMessage is null. The determination of whether the Service Worker has stopped is made by sending a message from the content script to the background script and checking whether the message return value is null as follows.
sendMessageToBackground.js
let infoFromBackground = await browser.runtime.sendMessage(sendParam);
if (!infoFromBackground) {
// If infoFromBackground is null, Service Worker should have stopped.
browser.runtime.connect({name: 'reconnect'}); // ← reconnection process
// Sending message again
infoFromBackground = await browser.runtime.sendMessage(sendParam);
}
return infoFromBackground.message;
Background script
browser.runtime.onConnect.addListener((port) => {
if (port.name !== 'reconnect') return;
port.onMessage.addListener(async (request, sender, sendResponse) => {
sendResponse({
response: "response form background",
message: "reconnect.",
});
});
②
Verified whether the service worker could be restarted by regenerating Background.js and content.js.
sendMessageToBackground.js
export async function sendMessageToBackground(sendParam) {
let infoFromBackground = await browser.runtime.sendMessage(sendParam);
if (!infoFromBackground) {
executeContentScript(); // ← executeScript
infoFromBackground = await browser.runtime.sendMessage(sendParam);
}
return infoFromBackground.message;
}
async function executeContentScript() {
browser.webNavigation.onDOMContentLoaded.addListener((details) => {
browser.scripting.executeScript({
target: { tabId: details.tabId },
files: ["./content.js"]
});
});
}
However, browser.webNavigation.onDOMContentLoaded.addListener was not executed due to the following error.
@webkit-masked-url://hidden/:2:58295
@webkit-masked-url://hidden/:2:58539
@webkit-masked-url://hidden/:2:58539
③
Verify that ServiceWorker restarts by updating ContentScripts
async function updateContentScripts() {
try {
const scripts = await browser.scripting.getRegisteredContentScripts();
const scriptIds = scripts.map(script => script.id);
await browser.scripting.updateContentScripts(scriptIds);//update content
} catch (e) {
await errorLogger(e.stack);
}
}
However, scripting.getRegisteredContentScripts was not executed due to the same error as in 2.
@webkit-masked-url://hidden/:2:58359
@webkit-masked-url://hidden/:2:58456
@webkit-masked-url://hidden/:2:58456
@webkit-masked-url://hidden/:2:58549
@webkit-masked-url://hidden/:2:58549
These are the methods we have considered. If anyone knows a solution, please let us know.
declarativeNetRequest.getMatchedRules() gives us the below error:
Error retrieving tabs or matched rules: – Error: Invalid call to declarativeNetRequest.getMatchedRules(). The 'activeTab' permission has not been granted by the user for the tab.
We have added the "activeTab" permissions in the manifest (version 2). And in the device Safari extension settings we see that user has given permission as "allow".