Hello,
We’ve been using the CesiumJS WebGL library for several years, both on our website and within embedded WebViews in our iOS application. Since upgrading to iOS versions 18.2 and 18.3, we’ve started receiving numerous user complaints regarding application crashes on various iPad and iPhone models when loading CesiumJS.
The crashes occur as soon as the 3D view initializes, and the error consistently reported is:
"WebGL context lost"
This issue appears to be a WebGL-related crash potentially triggered by GPU memory handling or allocation limits. However, we are not detecting any abnormal memory consumption prior to the crash, and the same setup works perfect on older iOS versions and on all Android devices and versions.
Steps to Reproduce:
Open: https://www.flightradar24.com/30.47,-94.84/8
Click on any aircraft icon on the map.
In the aircraft details panel at the bottom, click on the “3D view” tab.
On iOS 18.2 or 18.3, the page will crash shortly after initializing CesiumJS WebGL.
Affected Devices:
This issue is occurring across a wide range of devices, including:
iPad 9th Generation
iPad Pro (11-inch, 2nd Gen)
iPhone SE (2020 and 2022)
iPhone 11, 11 Pro
iPhone XR
iPhone Mini
All of the above are running iOS 18.2 or 18.3. The problem does not occur on Android or previous iOS versions.
Request:
Has anyone else encountered similar issues with WebGL context loss after upgrading to iOS 18.2 or 18.3? Are there any known changes in memory limits or WebGL behavior in these recent iOS updates? We’d appreciate any insight or suggestions on workarounds or potential fixes.
Thank you!
Safari
RSS for tagSafari is the web browser developed by Apple and built into all Apple devices.
Posts under Safari tag
193 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I would like to know if there is a way to disable Smart Punctuation from the webpage rather than requiring the user to do so from the settings. Adding a "inputmode=verbatim" attribute to the input HTML tags for my webpage did that for all the web browsers I tested on Windows, Ubuntu, Android, and MacOS. I tested Chrome and Firefox on all platforms, as well as Edge on Windows and Safari on Mac and iOS. So far the only time it did not disable Smart Punctuation was on Safari on iOS, but it did on MacOS.
We are seeing network errors in Outlook mail on iOS and MacOS safari browsers.
As per current investigation, we notice these network error when the user tries to use outlook after leaving it open on Safari for a while.
Observations:
Issue present in both MacOS and iOS safari.
Issue is not present in other webkit browsers like brave and edge on iOS.
Issue is reproable on both mini and big owa on safari browser.
Issue is not related to post requests being sent in different packets on safari browser.
Requests are only blocked for outlook.office/outlook.live domains
What does not fix this issue?
Reloading the application
Clearing cookie, local storage or session storage
Unregistering service workers
Redirecting to a different page and coming back to outlook domain
Re authenticating the users
What fixes this issue?
Reconnecting to wifi or mobile network
Reconnecting vpn
Removing safari from background and reopening
Flushing the dns in setting
We're embedding the Power BI reports into our portal by using JS library. While testing them, we found that mobile layout of the reports don't work as we expect on iOS devices (tested in Chrome and Safari). There are two principals issues: 1) the site is automatically refreshed when the users filter the data (we reduced them to lower expression) and 2) the site also crashes after a while using the dashboard by applying different filters.
Hi, I'm here to Report a Problem with the IOS 18.3 UPDATE.
So, when i Download a file, any file. The Download Progress has no problems, but when the download complete, Nothing happens it just keeps the blue line of the download, and then I can’t open that file…this only happened to me when i downloaded the IOS 18.3… hope it'll be fixed ASAP.
Bye!
Is this symbol, which Safari uses to the left of the address bar, in the public SF Symbols set? What's it called?
From a mail app or similar, when opening a webpage in Safari as an external browser, JavaScript on the webpage stops running if Safari goes into the background. Is there a way to prevent this from happening?
Sample code for the counter:
Behavior: Upon returning from the background, the counter continues for about 7-8 seconds but does not progress further.
For example, if Safari is kept in the background for about 20 seconds and then brought back, the counter stops at around 7-8 seconds and only resumes counting after returning to the foreground.
Expectation: The counter should continue running even if Safari goes into the background.
Background
On iOS 18.4 beta, setting a content inset on a WKWebView causes touch events inside the web view to be offset by the content inset amount. In other words, if the web view has a top content inset of 75 points, I must tap 75 points above the intended element for the touch to register correctly. This makes any web content unusable when a content inset is present.
A sample app demonstrating the issue is available here: GitHub - iOS18.4-Webview-Bug.
The issue does not occur in iOS 18.3 or 18.2.
Bug Report
The bug has been reported and fixed at WebKit Bug 289715 and also filed as rdar://147075945.
Question
Will the fix be included in the upcoming iOS 18.4 beta release (Beta 5) or soon thereafter?
I am calling fetch with a POST on page1 in Safari. No special cache parameters on the fetch call.
The response from the server is a 303 redirect to page2
The second page -- page2 -- is in my browser's cache with cache-control "public, max-age=31536000, immutable".
For some reason, the page2 redirect is causing a server hit to re-GET the second page every time instead of pulling from cache.
If I instead directly get the second page by doing a fetch on page2, there is no server hit.
If I do this on Chrome or Firefox, it behaves as I would expect, pulling page2 from the cache with no server hit.
In case it matters, the fetch is coming from within an iFrame. Also, if I change the original POST to a GET, the problem still happens.
I am using a pretty old version of Safari on my Mac, so I could chalk it up to that, but I am getting the same behavior with Safari on my iPhone with iOS 18.3.2
Any ideas?
Thanks.
I am playing FairPlay + Multi-Key content (fMP4) in Safari browser.
I want to implement the implementation to distinguish between SD and HD video quality, and play it in HD if HDCP is supported, and in SD if HDCP is not supported.
I have already confirmed that HDCP support is the default, and that a black screen is output in non-HDCP environments.
What I want is to improve the user experience by appropriately switching to SD/HD depending on HDCP support when playing DRM content.
Question: Is there an API or function that can detect HDCP support in Safari through JavaScript or other methods? Or is there a way to indirectly guess it?
Topic:
Media Technologies
SubTopic:
Streaming
Tags:
FairPlay Streaming
WebKit
Safari
HTTP Live Streaming
Sometimes Safari is rendering the icon for an active extension in its original provided colored representation, other times Safari is applying an overlay color in line with the system's highlight color.
This difference can even be seen seen on the Safari Extensions Developer home page: https://developer.apple.com/safari/extensions/images/extensions-hero-large_2x.png
You will notice that Grammarly's icon is shown in it's original color format, while the others aren't.
Example of extensions where the icon is shown in color:
Bitwarden
Grammarly
1Password
Consent-O-Matic
I've compared the source code of Bitwarden and Consent-o-Matic with my own extension and cannot find any differences in the settings or image properties (resolution, DPI, file type, color profile). If I take the exact PNG source files from said open source extensions and replace them in my own source code, these icons show up in full color.
Does this perhaps mean there is a bug in Safari's processing of the icons where it fails to overlay the icon with the highlight color in some cases?
I and I assume many developers with me would like to understand what determines this difference. Ideally, there is a consistent UX where the end user has the choice between icons in color or highlight color overlay.
I'm experiencing issues with audio playback in my React video player component specifically on iOS mobile devices (iPhone/iPad). Even after implementing several recommended solutions, including Apple's own guidelines, the audio still isn't working properly on iOS Safari. It works completely fine on Android. On iOS, I ensured the video doesn't autoplay (it requires user interaction). Here are all the details:
Environment
iOS Safari (latest version)
React 18
TypeScript
Video files: MP4 with AAC audio codec
Current Implementation
const VideoPlayer: React.FC<VideoPlayerProps> = ({
src,
autoplay = true,
}) => {
const videoRef = useRef<HTMLVideoElement>(null);
const isIOSDevice = isIOS(); // Custom iOS detection
const [touchStartY, setTouchStartY] = useState<number | null>(null);
const [touchStartTime, setTouchStartTime] = useState<number | null>(null);
// Handle touch start event for gesture detection
const handleTouchStart = (e: React.TouchEvent) => {
setTouchStartY(e.touches[0].clientY);
setTouchStartTime(Date.now());
};
// Handle touch end event with gesture validation
const handleTouchEnd = (e: React.TouchEvent) => {
if (touchStartY === null || touchStartTime === null) return;
const touchEndY = e.changedTouches[0].clientY;
const touchEndTime = Date.now();
// Validate if it's a legitimate tap (not a scroll)
const verticalDistance = Math.abs(touchEndY - touchStartY);
const touchDuration = touchEndTime - touchStartTime;
// Only trigger for quick taps (< 200ms) with minimal vertical movement
if (touchDuration < 200 && verticalDistance < 10) {
handleVideoInteraction(e);
}
setTouchStartY(null);
setTouchStartTime(null);
};
// Simplified video interaction handler following Apple's guidelines
const handleVideoInteraction = (e: React.MouseEvent | React.TouchEvent) => {
console.log('Video interaction detected:', {
type: e.type,
timestamp: new Date().toISOString()
});
// Ensure keyboard is dismissed (iOS requirement)
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
e.stopPropagation();
const video = videoRef.current;
if (!video || !video.paused) return;
// Attempt playback in response to user gesture
video.play().catch(err => console.error('Error playing video:', err));
};
// Effect to handle video source and initial state
useEffect(() => {
console.log('VideoPlayer props:', { src, loadingState });
setError(null);
setLoadingState('initial');
setShowPlayButton(false); // Never show custom play button on iOS
if (videoRef.current) {
// Set crossOrigin attribute for CORS
videoRef.current.crossOrigin = "anonymous";
if (autoplay && !hasPlayed && !isIOSDevice) {
// Only autoplay on non-iOS devices
dismissKeyboard();
setHasPlayed(true);
}
}
}, [src, autoplay, hasPlayed, isIOSDevice]);
return (
<Paper
shadow="sm"
radius="md"
withBorder
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
<video
ref={videoRef}
autoPlay={!isIOSDevice && autoplay}
playsInline
controls
crossOrigin="anonymous"
preload="auto"
onLoadedData={handleLoadedData}
onLoadedMetadata={handleMetadataLoaded}
onEnded={handleVideoEnd}
onError={handleError}
onPlay={dismissKeyboard}
onClick={handleVideoInteraction}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
{...(!isFirefoxBrowser && {
"x-webkit-airplay": "allow",
"x-webkit-playsinline": true,
"webkit-playsinline": true
})}
>
<source src={videoSrc} type="video/mp4" />
</video>
</Paper>
);
};
Apple's Guidelines Implementation
Removed custom play controls on iOS
Using native video controls for user interaction
Ensuring audio playback is triggered by user gesture
Following Apple's audio session guidelines
Properly handling the canplaythrough event
Current Behavior
Video plays but without sound on iOS mobile
Mute/unmute button in native video controls doesn't work
Audio works fine on desktop browsers and Android devices
Videos are confirmed to have AAC audio codec
No console errors related to audio playback
User interaction doesn't trigger audio as expected
Questions
Are there any additional iOS-specific requirements I'm missing?
Could this be related to iOS audio session handling?
Are there known issues with React's handling of video elements on iOS?
Should I be implementing additional audio context initialization?
Any insights or suggestions would be greatly appreciated!
It seems fetch() does not include credentials (cookie) even when credentials: include is used and Safari extension has host_permissions for that domain when using from a non-default Safari profile.
It includes credentials (cookie) when using from the default profile (which has the default name Personal).
Is there anyone who has this problem?
I try to request in popup.js like this:
const response = await fetch(
url,
{
method: 'GET',
mode: 'cors',
credentials: 'include',
referrerPolicy: 'no-referrer',
}
);
and it does not include the credentials (cookie) from host_permissions.
I already posted https://developer.apple.com/forums/thread/764279, and opened feedback assistant (FB15307169).
But it is still not fixed yet. (macOS 15.4 beta 3)
I hope this is fixed soon.
Hi, I would like to share a finding and ask for a solution, if possible. This may be a potential bug with PointerMoveEvent on Safari on an iPad with Pencil Pro.
I tested onPointerMove and onTouchMove in a <canvas> element in a React web app for freehand drawing using
Mouse on a PC.
Finger touch on iPad
Apple pencil pro on iPad
Finger touch on iPhone
I was able to draw smooth curves in all cases except when using onPointerMove with Apple pencil pro on iPad. The curve drawn in this case looked like it was created using several straight-line segments.
It seems like the sampling rate for PointerMoveEvent is lower than that of TouchMoveEvent on Safari
I am not sure how to solve this problem or if it is an issue with Safari's interpretation of PointerEvents. Any input is greatly appreciated.
Edit: It seems like https://developer.apple.com/forums/thread/689375
is related.
I'm creating a Safari Web Extension, which successfully uses storage.local and storage.session on MacOS (14.x/15.x) and iOS (15.x,18.x). However, when testing on an iPad running iPadOS 16.3, it fails with an undefined error:
TypeError: undefined is not an object (evaluating 'api.storage.session.get')
Dropping to the console, I can access 'api.storage.local', but no luck for 'api.storage.session'.
First question, why would storage.session not be available? Is there something different on this iPadOS version to enable it? I could just use local storage, but don't need the data to persist. I'll probably just fall back to this solution.
Second question, should I instead be using localStorage and sessionStorage? I can't find any helpful direction on if using localStorage vs storage.local is best practice?
Despite using the iPad in landscape mode, self-camera video is forced to portrait (Rotate 90 degrees).
Only the video is portrait, even though the browser is in landscape orientation.
Our app use getUserMedia() to get the video.
The problem also happend in iPad Safari GoogleMeet.
Details:
The problem occurs even when the screen orientation is locked.
After the video has been forced to portrait, rotating the iPad temporarily changes the video to landscape, but forces it to portrait again.
It takes around 0 - 30 seconds before the video is forced to portrait.
Both selfie camera and back camera
I have confirmed this problem on the following devices
iPad 8th iPadOS: 18.3.1
iPad10th iPadOS:18.3.1
iPadPro(M4) iPadOS:18.3.1
Some devices do not have this problem, even if they are the same model and OS version.
I have tried the following
restart
factory reset
Configuration changes (Settings > Apps > Safari)
SETTINGS FOR WEBSITES
Camera > Allow, Ask
Microphone > Allow, Ask
Advanced > Feature Flags
Reset All to Defaults
Screen Orientation API (Locking / Unlocking)
Screen Orientation API
WebRTC AV1 codec
Please help me to resolve this problom. Thanks.
I have a Safari Web Extension that successfully receives a message from a webpage and returns a response.
I now want to add a user interface to the Safari Web Extension. How do I do this?
I have modified the default template code as follow to add an NSAlert for testing. The modal runs, but no alert ever appears, and the code remains stuck at runModal.
What is the correct way to add a UI to a webextension?
- (void)beginRequestWithExtensionContext:(NSExtensionContext *)context {
id message = [context.inputItems.firstObject userInfo][SFExtensionMessageKey];
NSLog(@"Received message from browser.runtime.sendNativeMessage: %@", message);
NSAlert* alert = [[NSAlert alloc]init];
[alert setMessageText:message[@"request"]];
[alert setInformativeText:@"Hello"];
[alert runModal];
NSExtensionItem *response = [[NSExtensionItem alloc] init];
response.userInfo = @{ SFExtensionMessageKey: @{ @"id": message[@"id"], @"uuid": message[@"uuid"], @"contentType": message[@"contentType"], @"response": message[@"request"] } };
[context completeRequestReturningItems:@[ response ] completionHandler:nil];
}
@end
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 team, if I log into my app on Safari and try to enroll/challenge MFA security key option, I will be able to see this pop-up that gives me the option to pick either passkeys or external security keys
However, my team member who's using the same version of safari, can only see the external security key option
Why is this?
Topic:
Privacy & Security
SubTopic:
General
Tags:
Passkeys in iCloud Keychain
Authentication Services
Safari
Hello everyone.
I have a very strange behavior with smart app banners in Safari.
When I don't have installed app on my phone, I can't see the banner on our product main page. When I installed the app, I can see the banner, which allows me to go directly to the app. When I put any other app's ID in the meta tag it works perfectly even if I don't have its installed app.
So the code is right, what can be the reason of this behavior? Any settings of the app are required?