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

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

iOS Safari Rendering Issue: Sticky Header Sometimes Fails to Update After DOM Changes
I’m encountering an issue on iOS when rendering a list using React. Each list item uses the array index as the React key and consists of two parts: a header section that uses position: sticky for dynamic sticking behavior, and a body section whose height is automatically adjusted based on its content. When the list data is updated, I sometimes observe that the sticky header content does not update visually in time, even though the underlying data and DOM have changed. // demo.jsx import React, { useState } from 'react'; import { Button } from '@iftide/mobile'; import './style2.less'; // import data1 from './data1.json'; // import data2 from './data2.json'; const prefixCls = 'im-detaillist'; const data1 = [ { sectionTitle: '2025年05月' }, { sectionTitle: '2025年04月' }, { sectionTitle: '2025年03月' } ]; const data2 = [ { sectionTitle: '2023年08月' }, { sectionTitle: '2023年07月' }, { sectionTitle: '2023年06月' }, { sectionTitle: '2023年05月' } ]; export default function App() { const [list, setList] = useState(data1); const [toggle, setToggle] = useState(true); return ( <div> <Button title="更新2" onClick={() => { setToggle(!toggle); setList(data2); }} /> <div className={`${prefixCls}-container2`} style={{ height: `700px` }}> {list.map((section: any, sectionIdx: number) => { return ( <div className={`${prefixCls}`} key={String(sectionIdx)} // id={section.sectionTitle} > <div className={`${prefixCls}-section-title`} role="text"> {section.sectionTitle} </div> <div style={{ background: 'green', height: `${Math.ceil(400 * Math.random()) + 50}px` }} > 省略 </div> </div> ); })} </div> </div> ); } .@{prefixCls}-section-title { position: sticky; position: -webkit-sticky; will-change: transform; top: 0; z-index: 1; padding-left: 11px; width: 100%; height: 30px; font-size: var(--font-size-s); font-weight: 400; line-height: 30px; color: #000000; background-color: #F4F5F7; letter-spacing: 0; }
Topic: Safari & Web SubTopic: General Tags:
0
0
131
Dec ’25
TLS re-negotiation fails with ios18.4
I'm running apache with following configuration. /cc require TLS client certificate / not require TLS client certificate Starting with ios 18.4, accessing /cc after / fails with following error: AH02261: Re-negotiation handshake failed, referer: https://www.example.com/... SSL Library Error: error:1417C0C7:SSL routines:tls_process_client_certificate:peer did not return a certificate -- No CAs known to server for verification? It seems like ios 18.4 does not support TLS re-negotiation. (It worked with ios 18.3 and before) Is this an expected behavior or a bug?
Topic: Safari & Web SubTopic: General
0
0
140
Apr ’25
iOS 26.2 - Favorites Bar missing despite "Show Favorites Bar" being selected in Apps -> Safari
Hi. With update to 26.2 on my iPad the Favorites Bar has gone missing in Safari. "Show Favorites Bar" is selected in Apps -> Safari. I've emptied cache, deleted all history, etc in Safari. Restarted the iPad multiple times, but issues prersists. This issue is limited to my iPad. Favorites appear in both my iPhone and MacBook. Any ideas?
Topic: Safari & Web SubTopic: General Tags:
0
0
445
Nov ’25
iOS Mobile Video Audio Playback Issues in React
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!
0
0
507
Mar ’25
Worker load was blocked by Cross-Origin-Embedder-Policy
Hello, I am developing a website which starts a web worker using the js code: const zarrWorker = new Worker('./zarr_file.js', { type: 'module' });. The script 'zarr_file.js' is served from the same origin with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin and it is importing external modules through the import statement (e.g. import * as zarr from "https://cdn.jsdelivr.net/npm/zarrita/+esm";). All the external modules are blocked by Safari with the error Worker load was blocked by Cross-Origin-Embedder-Policy, although I can see (by running curl on them) that they correctly set cross-origin-resource-policy: cross-origin`. The same website works fine in Chrome and Firefox. Is it a bug or is Safari implementing stricter policies? In the latter case what would be the solution?
0
0
150
Aug ’25
Issues Observed with App Clip Behavior and URL Handling
Hi Apple Team, We’ve noticed a couple of issues with launching default App Clip in safari and would appreciate your guidance. App Clip Popup Timing: When launching the App Clip using default URL, we sometimes see the small App Clip popup appear before the App Clip banner is displayed. Ideally, the banner should appear first. Cached URL Handling: In certain cases, the App Clip appears to be using a cached URL instead of the most recent one. For example, when we invoke two different App Clip URLs with unique parameters, the App Clip sometimes launches using the previous URL’s data instead of the new one. This behavior is inconsistent and makes it difficult to ensure users are directed to the correct experience each time. Could you please help us understand whether this is expected behavior or if there are any known issues or recommended solutions? Thank you for your time and support. Example
0
1
194
Oct ’25
Incorrect page zoom after pinch-to-zoom and orientation change on Bing search page
Steps to Reproduce: Open the Bing search page in Safari (example URL: https://www.bing.com/search?q=webkit&form=APIPH1&PC=APPL). Pinch-zoom in or out, then return the page to exactly 100% zoom. Rotate the device from portrait to landscape orientation. Observe that the page is incorrectly scaled to a value other than 100%. Rotate the device back to portrait orientation. The page remains at the incorrect zoom level. Expected Result: After returning the page to 100% zoom, changing orientation should keep the zoom level at exactly 100% in both portrait and landscape modes. Actual Result: After returning to 100% zoom, rotating to landscape changes the zoom to a non-100% value, and rotating back to portrait retains the incorrect zoom level.
Topic: Safari & Web SubTopic: General Tags:
0
0
128
Aug ’25
Safe area issues on iOS 26 on website using WordPress plus elementor pro
I have a website I’m working on that uses WordPress and element mentor pro. Basically everything is custom HTML in individual containers and custom CSS for each page. The problem that I’m running into is there needs to be a pop-up and the easiest way to do that is just use the element or proper pop-ups however, the overlay is not extending into the safe areas on the bottom or top notch. I’ve been trying to figure out a way to fix this, and I cannot get it to work. I’ve tried having CSS in every imaginable way to get it to extend the overlay.. The other issue is for this website there is no header. It’s just a container that’s the hero content and for some reason that also will not extend into the top-notch safe area. It extends to the bottom notch just fine but not the top notch and there’s just a white bar there where I prefer it be the background gradient that I have set up for the hero however, nothing I do will get it to push into that top notch safe area either. Hoping someone else had this issue and can help me out
Topic: Safari & Web SubTopic: General
0
0
252
Oct ’25
WebView Bridge Communication Issue After Xcode 16 Update - iOS 18 SDK
Issue Description I'm developing a hybrid iOS app and encountering WebView bridge communication issues after updating to Xcode 16 with iOS 18 SDK. App Architecture AViewController: Initial view controller displayed at app launch Handles WebView setup and web-to-native bridge communication Pushes BViewController when receiving "B" bridge message from web BViewController: View controller stacked on top of AViewController Managed by navigation controller AViewController's WebView continues bridge communication even when BViewController is active Problem Behavior Xcode 15 (iOS 18): WebView bridge communication in AViewController works normally while BViewController is active Xcode 16 (iOS 18 SDK): Server communication breaks or hangs without response while BViewController is active Communication resumes only after popping back to AViewController from BViewController Questions Is the current architecture (configuring WebView in AViewController and maintaining bridge communication through AViewController's WebView while BViewController is presented) not a recommended pattern? Is Xcode 16's iOS 18 SDK the cause of this issue? If so, could you help me understand which specific changes are affecting this behavior? This is urgent as we need to deploy soon. I would greatly appreciate a prompt response.
0
0
195
Jul ’25
Mailto href is not working in iOS 18.3.2
Hi Team, I'm using the simple mailto functionality in the demo page and when I tested the same via Safari mailto functionality is not working. However, the same feature is working as expected via Chrome. Demo: https://jsfiddle.net/xut0ed4y/ Kindly help.me to resolve this issue.
Topic: Safari & Web SubTopic: General Tags:
0
0
283
Mar ’25
Analysis of issues on Safari with liquid glass
Hello, As previous reports have already shown, there seems to be a few issues on the latest version of Safari, mainly around: Modals taking up the full viewport Elements positioned at the bottom of the screen This also seems to affect the modals on apple.com/iphone. I've recently done an analysis of what can and can't be done in code to work with the new liquid glass UI and thought I'd share my findings here. The full write up, along with screenshots and the demos I used are available in this repository: https://github.com/stevenocchipinti/liquid-glass-spike A brief summary of the findings: The conditions for a fullscreen modal overlay element to cover the entire screen with a position: fixed; seems to be: The background must be semi-transparent Solid colours, linear-gradients, etc. don't work The container must be empty This also means the standard and ::backdrop don't seem to work. The conditions for a bottom sheet to cover the entire screen, including the area around the Safari toolbar seems to be: The element must be positioned within 3px from the bottom of the viewport The height must be within a certain threshold If I've missed anything, please let me know. It would be really nice to have some official documentation on these issues to explain to developers how to do this properly.
Topic: Safari & Web SubTopic: General Tags:
0
4
140
Sep ’25
Safari falsely flags our secure site (outdoorgala.com) as deceptive — how to request a review
Hi Apple Devs & WebKit Team, We operate https://outdoorgala.com — a verified, HTTPS-secure Canadian ecommerce site focused on elite outdoor safety gear. We're Indigenous-owned, based in Alberta, and take customer trust and compliance seriously. However, Safari (iOS + macOS) is falsely flagging our site as “deceptive,” preventing customers from accessing us — even though: We use GoDaddy Website Builder with no redirections or malware All product links are clean, HTTPS-secure, and tracked ethically We recently implemented a fully compliant cookie banner (Accept/Decline logic) A public security.txt and OpenPGP key has been published: https://outdoorgala.com/security No phishing, malware, or cloaking behavior exists on the site We’ve already submitted a review via: ➡️ https://websitereview.apple.com And filed a bug report via Feedback Assistant (FB17608544) What else can be done to speed up review or get flagged domains unblocked in Safari? This is hurting our business and blocking consumer access — despite following all Apple guidelines. Would appreciate any insights or escalation tips. Thank you! – Derek Eiteneier Founder, Outdoor Gala
0
0
333
May ’25
declarativeNetRequest addOrReplaceParams adds a parameter when already present
I'm trying to use DNR to force safe search with Qwant search engine. Under certain circumstances (scenario described below) the search is performed with an API which contains the safe search level in a URL parameter. A typical query URL is https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true. I want a DNR rule to force safesearch to be 2 (= strict) (from some javascript code) : { id: 1, priority: 1, action: { type: 'redirect', "redirect": { "transform": { "queryTransform": { "addOrReplaceParams": [{ "key": "safesearch", "value": "2" }] } } } }, condition: { "urlFilter": "api.qwant.com/v3/search", "resourceTypes": ["xmlhttprequest"] }, } When this rule is activated, I end up with a URL with the original safesearch parameter AND the forced one : https://api.qwant.com/v3/search/web?q=test&count=10&locale=fr_FR&offset=0&device=desktop&tgp=1&safesearch=0&displayed=true&llm=true&safesearch=2. To reproduce this request (with the previous DNR rule in place) : navigate to https://www.qwant.com search for some string (test in my case). This displays the list of results ; click the engine button at the top right to display the settings pane ; inspect network request performed by this page ; change the Adult filter in the list -> the results are automatically updated with the new settings. The web request shows URL with the 2 safesearch parameters. I already used addOrReplaceParams in 'standard' contexts (main_frame) and it works just fine. Any hint on what goes on ? Thank you.
0
0
439
Sep ’25
Install Safari Extension fails with "Unable to download App" and "Operation not permitted" in log
We have a Safari extension that's been up on the App Store for about 18 months with no apparent issues. This week, however, while working on an update, we uninstalled the production version on our test machines and installed a developer version. When we had some issues, we tried to go back to the production version downloaded from the App Store, but we get an pop saying "Unable to download App." In the log, the most obviously relevant error is 'Operation not permitted'. This occurs on several machines and different logins on those machines in both norma and safe modes. However, on another machine that never had one installed, we could still install the app from the app store, so I suspect there is something left behind that needs to be removed, but I don't know what. FWIW, I see the download directory getting created under /Applications, but it is promptly removed when the failure popup appears. Any suggestions?
0
0
127
May ’25
Apple Pay Not Complete On Web
{ "epochTimestamp": 1755169981033, "expiresAt": 1755173581033, "merchantSessionIdentifier": "SSH4ADF1D97A60B47FC8537037BE9892237_FF777A9CB5E9EDAB38A01E4EDF71CB5572F19153853DAC70ADC5AA3E75877CB4", "nonce": "b6f1e016", "merchantIdentifier": "7C52E6BFA112124092008236BE1EE49791E4E82E9082AD9AC98D55B03A088120", "domainName": "1960-ikffk.checkout.trypeppr.com", "displayName": "peppr", "signature": "308006092a864886f70d010702a0803080020101310d300b0609608648016503040201308006092a864886f70d0107010000a080308203ee30820394a00302010202080e7210e510586e34300a06082a8648ce3d040302307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3231303131303032313632395a170d3236303130393032313632395a306b3131302f06035504030c286563632d736d702d62726f6b65722d7369676e5f5543342d50524f445f4b727970746f6e5f45434331143012060355040b0c0b694f532053797374656d7331133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d0301070342000466e0ea0e787dcb3f66bc533189da2bda08ed9574e421117aa1af2cc310f6a8b19ca3e77ed00fa84e8df2ac8688e529866e76ebad89eda5b7c336e0f0d8a7d05da38202113082020d300c0603551d130101ff04023000301f0603551d2304183016801423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b304506082b0601050507010104393037303506082b060105050730018629687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65616963613330323082011d0603551d2004820114308201103082010c06092a864886f7636405013081fe3081c306082b060105050702023081b60c81b352656c69616e6365206f6e207468697320636572746966696361746520627920616e7920706172747920617373756d657320616363657074616e6365206f6620746865207468656e206170706c696361626c65207374616e64617264207465726d7320616e6420636f6e646974696f6e73206f66207573652c20636572746966696361746520706f6c69637920616e642063657274696669636174696f6e2070726163746963652073746174656d656e74732e303606082b06010505070201162a687474703a2f2f7777772e6170706c652e636f6d2f6365727469666963617465617574686f726974792f30340603551d1f042d302b3029a027a0258623687474703a2f2f63726c2e6170706c652e636f6d2f6170706c6561696361332e63726c301d0603551d0e0416041457c735942abd9ea2feccd3cbe7ede0a37c8cc5fa300e0603551d0f0101ff040403020780300f06092a864886f76364061d04020500300a06082a8648ce3d0403020348003045022100f2fa622622128cd1e1642084bc4117ccdede7289690e864cfb88abb43e04338e022065f85a90b82711d1fd762e0b59c45496e9e683c265c8279998e37872feae46ec308202ee30820275a0030201020208496d2fbf3a98da97300a06082a8648ce3d0403023067311b301906035504030c124170706c6520526f6f74204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b3009060355040613025553301e170d3134303530363233343633305a170d3239303530363233343633305a307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b30090603550406130255533059301306072a8648ce3d020106082a8648ce3d03010703420004f017118419d76485d51a5e25810776e880a2efde7bae4de08dfc4b93e13356d5665b35ae22d097760d224e7bba08fd7617ce88cb76bb6670bec8e82984ff5445a381f73081f4304606082b06010505070101043a3038303606082b06010505073001862a687474703a2f2f6f6373702e6170706c652e636f6d2f6f63737030342d6170706c65726f6f7463616733301d0603551d0e0416041423f249c44f93e4ef27e6c4f6286c3fa2bbfd2e4b300f0603551d130101ff040530030101ff301f0603551d23041830168014bbb0dea15833889aa48a99debebdebafdacb24ab30370603551d1f0430302e302ca02aa0288626687474703a2f2f63726c2e6170706c652e636f6d2f6170706c65726f6f74636167332e63726c300e0603551d0f0101ff0404030201063010060a2a864886f7636406020e04020500300a06082a8648ce3d040302036700306402303acf7283511699b186fb35c356ca62bff417edd90f754da28ebef19c815e42b789f898f79b599f98d5410d8f9de9c2fe0230322dd54421b0a305776c5df3383b9067fd177c2c216d964fc6726982126f54f87a7d1b99cb9b0989216106990f09921d00003182018930820185020101308186307a312e302c06035504030c254170706c65204170706c69636174696f6e20496e746567726174696f6e204341202d20473331263024060355040b0c1d4170706c652043657274696669636174696f6e20417574686f7269747931133011060355040a0c0a4170706c6520496e632e310b300906035504061302555302080e7210e510586e34300b0609608648016503040201a08193301806092a864886f70d010903310b06092a864886f70d010701301c06092a864886f70d010905310f170d3235303831343131313330315a302806092a864886f70d010934311b3019300b0609608648016503040201a10a06082a8648ce3d040302302f06092a864886f70d010904312204209378ff57580c3205e9ea38d985a2e9ca2db7f06db29b7560f585561a23894402300a06082a8648ce3d04030204483046022100fad47e840779070d097ef91cd4bfa5381d77426071cb38c1cdc77ff9460ba1470221009215c246893bff0983052caaae610a16117237e73ab36d859008e7b234670eaa000000000000", "operationalAnalyticsIdentifier": "peppr:7C52E6BFA112124092008236BE1EE49791E4E82E9082AD9AC98D55B03A088120", "retries": 0, "pspId": "7C52E6BFA112124092008236BE1EE49791E4E82E9082AD9AC98D55B03A088120" } This is generated in the onvalidatemerchant event handler, and passed into session.completeMerchantValidation. Using a sandbox account with linked cards, the next thing that happens is a "payment not completed" message in the ApplePay popup on the page, and the oncancel event is hit Inspecting the event, I don't see anything that hints at the issue. There is a sessionError object, but its code is "unknown" and the info object is empty.
0
0
167
Aug ’25
Safari drag multi-tasking gesture not working for Safari on iPad Pro M1
Bit of an odd one here, just keen to understand if it’s just me or a more generic issue. For all other apps, I can drag the icon from the dock to place into stage manager left, centre or right. However when I try to do the same with Safari (and only Safari), it just doesn’t work at all. I can repeat this 100%, has been an issue with 26.0, 26.1 and now 26.2. Can confirm this isn’t a problem on my 11” M4 iPad pro running same O/S. Here is a video showing the issue (YouTube) https://youtu.be/0WBGBZVHsfs
Topic: Safari & Web SubTopic: General
0
0
116
Dec ’25
Tab Bar Transparency Problem on iOS 26
i have programmed a website and struggle to get it to work on safari ios26. 100vh fixed positioned images do not fill the screen anymore. i could live with that, having two background coloured spaces at the top and at the bottom. but elements that scroll out of this new viewport are fully visible, as you can see on the enclosed screenshots. i have no idea how i could fix this and dont find any answer anywhere on the net?
Topic: Safari & Web SubTopic: General
0
0
281
Dec ’25