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

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

Forcing Reflow in Safari/Chrome on iOS When Switching from overflow-x: hidden to overflow-x: scrollcroll tant que l'utilisateur maintient son doigt sur l'écran
Hello everyone, We are encountering a specific issue on iOS devices (iPhone 15 Pro in our case) when using Safari and Chrome. The problem occurs when switching an element's overflow-x property from hidden to scroll while the user keeps their finger on the screen. Problem Description: The overflow-x property change does not trigger a reflow or render update immediately. This behavior causes the element to remain visually stuck in the previous hidden state until the user lifts their finger and interacts again. Context: The element is animated. The issue happens consistently when the user's finger remains on the screen during the property transition. What We’ve Tried: Explicitly forcing styles using element.style in JavaScript. Triggering element.offsetWidth or getBoundingClientRect() to force reflow. Applying manual transform changes in combination with overflow updates. Unfortunately, none of these approaches resolve the issue in real-time while the user’s finger is on the screen. Questions: Is there a recommended way to force a reflow or repaint in Safari/Chrome on iOS under these conditions? Are there known limitations with overflow-x transitions and user touch events on iOS? Are there any workarounds or best practices to handle such cases? Thank you in advance for any insights!
Topic: Safari & Web SubTopic: General
0
1
418
Jan ’25
Swipe down refreshes page rather than intended vertical scroll
Hello I built a WordPress website with a three.js/react front page. On iOS chrome, Android chrome, and desktop chrome all is working well. However, on Safari mobile when the animation loads a downward swipe causes the page to refresh rather than scroll as is intended and working correctly on all the other browsers. Strangely, scroll up works initially and then downward scroll begins to work. I have tried various iterations of overscroll behavior but still cannot aolbe the issue. Any help would be appreciated.
Topic: Safari & Web SubTopic: General
0
1
226
Jan ’25
macOS 15.1 WKWebView not allowing user to contract a text selection
We have an iOS app (which runs on macOS via "Designed for iPad") which renders web content on WKWebView. Our users can select text (standard OS way of click & drag cursor across text) and then perform actions on those discrete pieces of text. On macOS 15.1, our users can only expand a text selection, they cannot contract the text selection by dragging the cursor to the left. This reduces the usability of our app on macOS 15.1. This is not an issue on macOS 14. Environment: MacBook Pro (2021 16” M1 Max), macOS 15.1 Submitted Feedback FB15726254.
1
6
525
Jan ’25
WebETC video connection dropping and reconnecting on or after ios 17
I've been having connection issues with WebRTC in my web app since updating my devices to iOS 17 or above.The issues are inconsistent, but generally the video connection cuts out after a couple seconds, & keep reconnecting again and again. My app code is working fine for these days since 5 to 6 years. its also working fine ios 16 and below device. I am using safari browser. what could be the issue can anyone tell? i am using Janus webrtc by meetcho
1
0
312
Jan ’25
Smart Banner for Testflight App
Hi, I am wondering if anyone has experience with Smart Banners for an application not released on the app store, but still in TestFlight, specifically an AppClip. I am working on an exisiting project where a Smart Clip is used with a smart banner on the website for core functionality. Previously, even in test environment (app is in test flight and not app store) the smart banner would correctly show on the website and allow testers to launch the app clip experience, however this no longer seems to work. Its noted the test environment was last tested and deployed 2 years ago, and was working correctly, and there have been no changes to the website (the meta tag and .aasa file are all setup correctly). The only recent change was upgrading the app to support the latest iOS version, however beyond that no functionality in the app has changed. Apple developer support hasn't been very helpful, and reviewed our account and stated "everything appears to be running as expected on our end" Has something changed in Safari in that it no longer accepts test flight app smart banners, and if it doesn't, does anyone have any other suggestions? Cheers
0
1
426
Jan ’25
HTMLAudioElement on iOS is paused when video plays again
On iOS (iPhone or iPad) the following behaviour happens: when both an HTML video element and an HTML audio element are playing on a page, and the video source ends, and the video source is programmatically forced to play again then the system will automatically pause the audio. See following stackblitz project for a sample: https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md Steps to reproduce Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan. On an iPhone/iPad device or simulator, in Safari: browse to index.html when on iPhone, press iPhone Load to force preloading video. Not needed on iPad press Play to start playing both audio and video wait until clip ends and then restarts from 0:00 Expected Audio should keep on playing and eventually loop. Actual When clip restarts from 0, audio is put to pause by the system. Further details This does not happen e.g. on Mac Safari nor on another device/browser. Also, some alternative scenarios: when HTML video element has the muted attribute, the issue disappears and audio is not paused when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
Topic: Safari & Web SubTopic: General Tags:
0
0
327
Jan ’25
Why does ReactPlayer fail to play videos at 3x speed only on iOS Safari?
I'm encountering an issue with ReactPlayer where videos fail to play when the playback rate is set to 3x, but this problem only occurs on iOS. The same functionality works perfectly fine on Android devices and desktop browsers like Chrome and Firefox. Here are the details of my setup: ReactPlayer version: 2.16.0 Video format: [MP4, hls ] Tested devices: iPhone 13 Expected behavior: Videos should play smoothly at 3x speed. Actual behavior: Videos fail to load or play when playbackRate is set to 3.0. I've read that iOS Safari might have limitations regarding playback rate due to performance or energy efficiency, but I couldn't find any official documentation to confirm this. If anyone has faced a similar issue or knows the root cause (or a workaround), I'd really appreciate your insights. Additionally, if there are official resources or documentation about playback rate limitations on iOS Safari, please share them. Thanks in advance for your help!
Topic: Safari & Web SubTopic: General
0
0
286
Jan ’25
Unexpected Behavior: PointerEvents do not permit simultaneous pencil and multitouch at the same time. Discussing Workarounds
For many years, I've noticed that although in native code I can handle continuous and simultaneous Apple pencil and touch inputs using UIKit, Safari and WKWebView's PointerEvents only seem to allow you to use one input type at a time. i.e. Apple Pencil down blocks touch input until lifted and touch input blocks Apple Pencil input. It's as though requiresexclusivetouchtype has been set in the underlying webkit implementation. There's decades of research (e.g. https://dl.acm.org/doi/10.1145/1866029.1866036 ) and several existing native applications in production showing that multimodal inputs open-up many unique and useful applications and interactions. Even a simple "hold object with finger" + "draw with stylus" controls are the norm. I recently built a native application using multimodal simultaneous inputs, but this is impossible to port to web due to the unexpected behavior of PointerEvents (and touch events, and mouse events; any variant exhibits the same behavior). I've researched and attempted to apply every possible flag, change, and css code to get this working, but I think the behind-the-scenes implementation is what's blocking the simultaneous touch types. This is unexpected and undesired behavior because it's inconsistent with the native behavior. If it's unintended, it's a big priority to fix for creating better user experiences on the iPad. If it's intended, I do not believe that's reasonable (even if it might be more complex and used for more advanced applications). Please expose a way to support simultaneous touch types in iPadOS/iOS in both Safari and WKWebView. At minimum, may we have a discussion on how to support the desired behavior? The simplest solution I can think of is to provide a webkit-platform-specific boolean in Safari and WKWebView called requiresExclusiveTouchType, which is set to False by default to keep the current behavior, and settable to True to get the more flexible behavior I'm expecting.
2
0
634
Jan ’25
WKWebView 120hz Support
I'm developing an application that needs smooth framerates within a wkwebview that interacts with native code. However, requestAnimationFrame by default is still throttled to 60hz even if all my target devices (the iPad Pro for example) have supported 120hz for a long time already. I noticed that the latest Safari in 18.3 beta supports unlocked framerates, but that's only under Safari feature flags. To my knowledge, these flags do not apply to WKWebView. Is there a way to enable unlocked framerate in WKWebView via requestAnimationFrame? (Calling JS at a faster rate from the native code side will not work, almost definitely, since WKWebView will still render at its own rate.) This is an experimental application for internal use and I'm okay if there are temporary beta solutions available.
2
1
699
Jan ’25
Pay dialog never times out?
We're using the PaymentRequestAPI, and to my surprise I see that if we open the payment dialog then don't interact with it - biometrics to approve or cancel/X button - it sits there open indefinitely. Is there any way to tell it to only sit there for some limited time period before canceling?
0
0
355
Jan ’25
Where to find possible ApplePayFeatures
Using the PaymentRequestAPI, I see this request element listed, but I can't find any description what these features could be: sequence <ApplePayFeature> features; https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase/4224914-features
0
0
353
Jan ’25
Apple Pay sometimes doesn't work (device specific)
Hey there. I recently completed an Apple Pay (on the web) integration and it has been working fine, for the most part. I had one customer contact us saying that it didn't work on his devices though. I checked it out, and while it does normally work (and we've had over a thousand transactions use it) there does seem to be some scenarios where it fails and I'm not sure why. I was able to replicate his issue (or at least an issue) by using BrowserStack. When I click the button which should initiate the payment, everything works in the JS code until it gets to the applePaySession.begin() function call. Once it hits that, it just stops. No errors are generated and no notice is given that anything is wrong until you try to do it a second time. Then an error about a payment session already being active on the page is thrown. I'm not really sure how to troubleshoot this since I know it works on my old iPad Air 2, my current M4 Macbook, multiple other devices, and also works when scanning the QR code for use on an iPhone. There is some very specific thing with some very specific versions of Safari that seem to be tripping it up. If it helps, the version of Safari on the BrowserStack device is 18.1, but the version on my Macbook is 18.1.1. The version the customer who is having the issue is on is 18.2 according to him. The customer also says they have used ApplePay on other websites with no issues. I checked one of them and they appear to be using a PayPal integration, where as I am using the ApplePay SDK straight from Apple. There are quite a few variables at play here, and I'm just trying to narrow down what I should be looking at. If one person is reporting the issue, there are probably others with it as well.
1
1
445
Jan ’25
WKWebView: Fullscreen API very unreliable on iPadOS 18.x
Since iPadOS 18.x WKWebView seems to have a bug within its Fullscreen API (which can be enabled via WKPreferences.isElementFullscreenEnabled). This bug has the effect that websites trying to make an element (for example a video player) fullscreen fail to do so. This does not always happen, most of the time the fullscreen mode does work fine, but sometimes (far too often to be ignored) it does not. If an instance of WKWebView shows this issue, it can not be "fixed" by reloading the page or loading other pages, this issue exists in this instance forever. My App is a web browser App so I can create and remove WKWebView instance easily (by opening or closing Tabs). And there are times where I never see this bug, and times where ever other tab shows this bug. It's totally unreliable. The App does not show any issues at all when running under iPadOS 17 or older. The issue is only present under iPadOS 18.x. After some testing I've found out that when the bug has affected an instance of WKWebView, the JavaScript call element.requestFullscreen() will work if the element is a video element, but does no longer work if it is another element (like a DIV). If an instance of WKWebView is not affected by this bug, element.requestFullscreen() will work for all HTML elements. Does anyone has experienced this bug as well? And maybe found a workaround? Or maybe found a pattern which helps to find out what exactly is triggering this bug?
2
1
1.2k
Jan ’25
WKWebview Domain Limit
Hi everyone, We're facing a challenge with Apple's WKWebView and its WKAppBoundDomains limit. Our web app is hosted across multiple dedicated domains to ensure security and isolation for our customers. Additionally, we rely on a service worker to provide offline functionality within our app. To enable the service worker in our WebView app, we must specify the domains within the app-bound domains list. The issue we're encountering is the 10-domain limit, which is restrictive since our app needs to support access to more than 10 domains. Has anyone found a workaround for this limitation? Or does Apple provide any exceptions to this rule if a strong case is presented? We’d greatly appreciate any insights or experiences you can share. Thanks in advance!
Topic: Safari & Web SubTopic: General
1
0
307
Jan ’25
role="link" elements
I'm having issues with opening up role="link". links in wkwebview. Is there a way in my decideforpolicy to allow these links to open up in the current webview vs another window like a traditional web browser does? Thank you ahead of time.
Topic: Safari & Web SubTopic: General Tags:
0
0
275
Jan ’25