Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics

Post

Replies

Boosts

Views

Activity

After set video.src, video.play() not work
Iphone 16 pro After set video.src, video.play() not work <div> <button id="play"> play </button> </div> <video id="video" preload="auto" playsInline webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" x-webkit-airplay="true" raw-controls="true" style="width: 300px;" > <source src="****.mp4" type="video/mp4" /> <track kind="captions" srcLang="en" /> </video> <script> document.querySelector('#play').addEventListener('click', function() { document.querySelector('#video').play(); }) document.querySelector('#video').addEventListener('ended', function() { document.querySelector('#video').pause(); document.querySelector('#video').src = '*****.mp4'; document.querySelector('#video').play() }) </script>
0
0
6
4h
Safari-Specific React Animation Issues: Infinite Scroll Breaking on MacBook
I'm encountering a browser-specific issue with a React infinite scroll animation component. The animation works perfectly in Chrome on MacBook, but breaks specifically in Safari: ✅ Chrome on MacBook: Works perfectly ❌ Safari on MacBook: Animation and layout issues Technical Details Environment Browser: Safari: Version 18.1.1 (20619.2.8.11.12) MacBook 13-inch display React 18 GSAP for animations TailwindCSS for styling Next.js/TypeScript project Implementation const MovingGrid: React.FC = () => { useEffect(() => { const initAnimation = () => { const container = containerRef.current; if (container) { gsap.to(container, { x: `-${firstSet.clientWidth}`, duration: 30, ease: "none", repeat: -1, onRepeat: () => { gsap.set(container, { x: 0 }); } }); } }; }, []); return ( <div className="hidden lg:block overflow-hidden w-full relative"> <div ref={containerRef} className="flex absolute -bottom-[100px]"> {/* Grid content */} </div> </div> ); }; Safari-Specific Behavior Images overflow the container in Safari only Layout gets disrupted when animation resets Same code works perfectly in Chrome on the same machine Cross-Browser Testing Results Safari on MacBook: Issues with animation and layout Chrome on MacBook: Works as expected Firefox on MacBook: Works as expected Safari on iOS: Needs testing Chrome on Windows: Works as expected Attempted Solutions Safari-specific CSS fixes: /* Attempted Safari-specific fixes */ @supports (-webkit-hyphens:none) { .moving-grid { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } } Modified GSAP configuration for Safari: gsap.config({ force3D: true }); Tried various CSS transform and positioning approaches: className="transform will-change-transform" style={{ WebkitTransform: 'translate3d(0,0,0)' }} Questions Are there known Safari-specific issues with GSAP animations that require special handling? Does Safari handle infinite scroll animations differently from Chrome in terms of performance or rendering? Are there recommended Safari-specific optimizations for smooth animations? Should we implement a different animation approach specifically for Safari users? Investigation Notes Performance metrics show no significant issues Animation frame rate is consistent Layout calculations appear correct before animation starts Impact This issue affects a crucial part of our property showcase website, specifically impacting Safari users on MacBook devices. Given Safari's significant user base on MacBooks, this needs to be resolved for a consistent cross-browser experience. Additional Context The animation is part of a larger property showcase feature Performance is crucial for user experience Need to maintain visual consistency across browsers Reproduction Steps Open website Safari on MacBook [pinkdoorbnb .com] Observe the infinite scroll animation Compare with Chrome on the same device Note the differences in animation behaviour and layout I would greatly appreciate any insights into Safari-specific animation handling or alternative approaches that work consistently across browsers. Here is sample Google Chrome ⬇ Safari ⬇
0
0
9
5h
How to Remove an Old Email-Associated Passkey from Apple Servers?
I noticed that when logging in to idmsa.apple.com, my old email address still appears as an option, even though I’ve updated my Apple ID to a new email. I understand that passkeys rely on a public-private key pair, with the public key stored on the server (e.g., idmsa.apple.com) and the private key saved locally in iCloud Keychain. Could you please clarify: 1. How can I request Apple to delete the public key associated with my old email address from their servers? 2. Is there a way for users to manage or update server-side passkeys without contacting Apple support? 3. Does this behavior affect my account security in any way? Any advice or insights would be greatly appreciated!
0
0
9
9h
Css fieldset/legend with flex and float bug
When I want legend inside the filedset, not on the border as default browsers design, I set float: left to the legend. It works in every modern browser - Safari too. The problem is when the filedset itself is set to display: flex. Float propertie of the legend is ignored. In other browsers this approach works fine and the float stays and the legend is inside of the fieldset as we expect.
0
0
51
23h
Safari ios 18.2 download problems
iPhone 15pro iOS 18.2 Downloaded files cannot be located anywhere in Files, only by accessing Downloads in Safari. I have tried setting download folder to various locations, iCloud, Phone, Google Disk, but nothing is stored. Has an invisible cache or temp folder been introduced? If so, it is a total fail: When press-holding any file in Safari download, the normal file action options (Quick Look, share, store to Files, etc) are not available. When clicking any file it opens any of several apps that has this file type associated with it, and there is no way to change the default app or disable the forced opening of an app. I tried deleting the app opening .csv (in this case OneDrive), and another irrelevant app opened. There seems to be a hierarchy of apps-file types, and it has no logic to it. in Chrome behaviour is as expected. Chrome vs. Safari screen recordings: https://shorturl.at/my3Oy
2
0
136
1d
Safari goes into an infinite loading loop if it cannot load the webpage
I have a Safari extension which allows the user to load their own homepage upon opening a new tab. The extension works by retrieving the homepage URL from UserDefaults and then redirecting to it using window.location.replace. In iOS 18, if the homepage is unable to be loaded due to, for example the user having no internet connection, Safari will go into an rapid loading loop, which eventually stops after a while. This is unlike iOS 17, where trying to reproduce the same scenario will end up with a Safari error page, which should be the expected behaviour. In short, instead of Safari going into an infinite loading loop, it should display a Safari error page like iOS 17 does. As this issue is only happening on iOS 18, I am almost certain it's an iOS bug and would appreciate if this can be fixed as soon as possible. I have created a Feedback Assistant report with ID FB15853821, which contains a sysdiagnose file from my iPhone 16 Pro, as well as two videos, one from my iPhone 16 Pro with iOS 18.2 beta 3 and the other video showing a comparison between iOS 18 and 17. Both videos first show the extension functioning correctly with an active internet connection, but when I disable my internet, the iOS 18 Safari goes into an infinite loop. Here are the steps to reproduce the issue: Download the Homepage for Safari app from the App Store: https://apps.apple.com/gb/app/homepage-for-safari/id6481118559 Enter any valid homepage URL, such as https://apple.com and tap Save Go to Settings -> Apps -> Safari -> Extensions -> Homepage and enable the extension Make sure Open New Tabs is set to “Homepage” Turn off both WiFi and cellular data and attempt to open a new tab in Safari Please note that this also happens with iOS 18.2 beta 4.
0
0
108
1d
IOS 18.1 breaking camera in PWA
We have a PWA that can be added to a users home screen. In IOS 17, when added to a phones home screen, the camera works as expected. Since testing this on an IOS 18 device, the camera does not work. I am asked if I want to allow the camera. After saying yes, it never loads. I do see a red camera icon in the top bar, but the camera doesn't show. When trying the PWA in the safari web-browser, the camera works as expected
1
0
84
2d
Various Safari issues/bugs in iOS 18.2 Beta (iPhone 15Pro)
A few observations Very slow response and loading times for both URLs, forms, and scrolling Frequently non-responsive touch-screen for on-page forms and actions Keyboard stays open with no option to get rid of it Auto zoom stuck in xoomed-in mode, often hiding "Save"/"Submit"-buttons Dowbload folder setting ignored Toggling of web inspector mode does not work In vertical mode, with address bar on top of screen, clicking items on bottom part of page is not registered as click, but makes the navigation bar pop up, hiding the clickable feature. For clicks to register, frequently 2-3 touches are required.
1
1
131
2d
How to interact programatically with the popup paste button
I am trying to figure out a way to programatically paste the contents of the clipboard into a series of text input fields. Specifically, this is for a security code entry screen, where the user will receive a code as a string of number characters. After verifying that the string represents a number, I split it into an array of single number chars, then paste the value at each index into each input. This works fine in Chrome and Firefox, but fails in Safari. After a lot of research, I have found that programatic pasting is a challenge on this platform. I did discover that if I listen for the focusin event and then get the contents of the clipboard, a popup "paste" button will appear. Clicking it does nothing, but I'm thinking that I might be able to grab the button in code and bend it to my will. Can anyone tell me how to interact with that button?
0
0
61
2d
iCloud Private Relay on local network (LAN)
Hi, I need a version of a web app to be accessible on a local network (LAN), when the users connect to a wifi without internet access. I provide a valid TLS certificate to validate the website. There is also a local DNS (dnsmasq), with the following entries to return NXDOMAIN, as specified by the documentation. server=/mask.icloud.com/ server=/mask-h2.icloud.com/ However, without internet (no cellular data), there is an error in Safari instead of the website. When there is some internet connection, there is a warning that allows to continue to the website by showing the IP address, which is not clear for the user. iPhone users are very frustrated. Is there a solution?
0
0
85
3d
NSURLErrorDomain -1003
Hello, i've read about this error, which means a DNS-Problem. Some hints: I'm using an Apple MDM and have set up an cardDAV-Server with "Radicale". If i set up the account for this cardDAV on the iPhone manually, everything works fine, i even can get the Website on my cardDAV in Safari without problems. If i deploy this payload with my MDM, i'll get the Error and after We'll refresh if we find a better network connection. I don't understand where the problem is. Thomas
1
0
101
4d
Safari Web Extensions: browser.webNavigation.getAllFrames by tabId return empty string url, when url is in blob protocol
Hello. Environment Safari version 18.1 (22B81). Problem In my Safari Web Extension i need to determine the url of the active tab. I do it this way: const onError = (error) => { console.error(error); }; const getFrameUrl = async (frames) => { console.info(frames) }; const getAllFrames = (frames) => { browser.webNavigation.getAllFrames({ tabId: frames[0].id }).then(getFrameUrl, onError); }; browser.tabs.onUpdated.addListener(() => { browser.tabs.query({ currentWindow: true, active: true }).then(getAllFrames, onError); }); The problem is that if the tab url is a link in the blob protocol, then the result function browser.webNavigation.getAllFrames({ tabId: tabs[0].id }) is as follows: {frameId: 0, parentFrameId: -1, url: "", errorOccurred: false} In Safari version 17 the correct URL value was returned: {frameId: 0, parentFrameId: -1, url: "blob://<some id>", errorOccurred: false} How can I fix the problem? Environment Safari version 18.1 (22B81).
2
1
202
4d
WKWebView Challenges while authenticating PIV Certificates
Hi, I have a SAML authentication scenario with MFA(probably Okta) in my app that runs in WKWebView using Cordova. I am currently doing POC to authenticate PIV certificates(either one of the 3 Issuers: DISA Purebred, Intercede and Entrust) in WKWebView with Cordova. As if now, I have found that WKNavigationDelegate method: didReceive challenge, we can authenticate the certificate. Also, these PIV certificates which are stored in the form of .p12 in Apple's keychain group needs to be imported using function: SecPKCS12Import. Please let me know if my understanding is correct or if there are any implementation challenges in WKWebView with Cordova. I would highly appreciate if any information regarding this can be provided.
5
0
123
4d
WKWebView Authorization Challenge fails to refresh
I have a url that I want to stream, the stream is protected by basic auth. I am using URLAuthenticationChallenge (wkwebview navigation delegate function) method to provide my credentials. the credential changes with every stream url. The issue I am facing is that URLAuthenticationChallenge is never called upon refresh or on new URL request until the app is killed and opened again. I have tried: clearing cooking setting cache to ignore opening an another blank url using child view approach setting wkwebview instance to nil I always end up with 401 in decidePolicy (wkwebview delegate functions) on subsequent refresh call. Upon inspecting I see that it is using my previous used credentials and never calling challenge to update. *Backend has a no-cache policy in its header. **I am using http resource, the aim is to have streaming service on iOS. class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate { @IBOutlet weak var wkWebView: WKWebView! override func viewDidLoad() { super.viewDidLoad() let url = URL(string: "http://some-ip-address/some-path")! var request = URLRequest(url: url) request.httpMethod = "GET" wkWebView.configuration.allowsInlineMediaPlayback = true wkWebView.navigationDelegate = self wkWebView.load(request) } // this is just called once. we want to call it everytime our page refreshes. // we have tried clearing cache and cookies but failed to call challenge func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping(URLSession.AuthChallengeDisposition, URLCredential?) -> Void) { let credential = URLCredential(user: "user", password: "password", persistence: .forSession) completionHandler(.useCredential, credential) } }
1
0
145
6d
iOS18 WKWebView URLProtocol
In our project, URLProtocol is used to intercept the request of WKWebView.loadRequest. On iOS18, if the APP is idle for more than 10 minutes and then clicks on an H5 page, the time from WKWebView.loadRequest -> URLProtocol.canInitWithRequest will be as long as 600ms or more, but the second time the H5 page is opened, it will only be 80ms. This only occurs on iOS18 models.
2
0
205
1w
WkWebView breaks with isElementEnabled preference set to true on fullscreen pause
I have an webview that loads videos in it, we would like to be able to fullscreen our videos, so we use the fullscreen preference in the documentation however when it is set to true, upon fullscreening a video then pausing it, the entire video player will disappear. You can exit fullscreen and attempt to fullscreen the video player once again, however upon doing this the entire app view will now disappear and you'll see your desktop background (or whatever is currently behind your app). This behavior seems consistent across multiple websites with the current app. I have setup a sample project you can test here The Main error that seems to trigger to the console is this. I have not been able to find a solution to, maybe I am simply missing something here. I am on Sequoia 15.2 for Mac. Attempting to update all DD element frames, but the bounds or contentsRect are invalid. Bounds: X: 0.00 Y: 0.00, W: 0.00 H: 0.00, contentsRect: X: 0.00 Y: 0.00, W: 1.00 H: 1.00 , skipping
2
0
251
1w
Safari tabs sync doesn't work
Hello, I'm facing the issue of not working sync of Safari tabs across my devices. I'm currently on macOS 15.2 Public Beta and iOS 18.2 Public Beta and sync still doesn't work. When I try to turn it off on all devices and set-up again it starts working and sync properly but only one time, than again stop working properly. It's also described here as an issue: https://discussions.apple.com/thread/255767048?sortBy=rank
2
0
182
1w