Even when iOS's '"." Shortcut' keyboard setting is enabled, double-tapping the spacebar in WKWebView doesn't insert a period. While making WKWebView editable , "." shortcut is not working. It works fine when any other external keyboard is used. I am facing this issue in WKWebView using apple keyboard. Even forceful adding javascript to replace double tap of space bar to period character logic is not working.

Application: HTML,Javascript,Angular web Application Issue: In Iphone/Ipad while trying to enter English characters using Japanese keyboard in the input field the japanese keyboard freezes and stops working after entering the first character. Root Cause: Two validations given in the onInput call back method causes the issue. when the validation are removed keyboard is working fine 1.for converting lowercase letters to uppercase 2.Some Character are not allowed so they are replaced after input

I have a wind map web application developed using HTML canvas 2D. However, after iOS 16.X (I'm not sure of the exact version), the streamlines have changed and now appear as below. They no longer disappear as they did previously. This issue is not limited to a specific browser. Before: After:

Hello, I've encountered an issue with the scrollbar functionality on my webpage specifically when accessed through Safari. Despite its functionality on other browsers and devices, Safari on iOS 14 displays only the native scrollbar during scrolling, contrary to the desired behaviour of consistently showing the scrollbar. &::-webkit-scrollbar { height: 2px; } &::-webkit-scrollbar-track { background-color: "white"; margin-left: 4px; margin-right: 4px; } &::-webkit-scrollbar-thumb { background: "orange"; } }

Hello community, first post I hope to meet the guidelines. I am developing a web site that uses a library that involves audio playback. This playback is accompanied by an animated canva, and in the IOS17 version in safari, this does not work. The audio is muted and the canva does not animate. However, in ios16 safari it works perfectly. I have also tried in safari on MacOs and ipadOs and it works, which makes me see that the problem is with ios 17 safari. The library in question is this: https://github.com/foobar404/Wave.js/ I don't think the failure is in the library since it works as I said in all other platforms. Specifically the code is here: https://github.com/foobar404/wave.js/blob/main/src/index.ts and makes me think that some HTML element is being incompatible. It is necessary to emphasize that in ios17 it does not work, but it does not appear any error in console. I would love to get help or know if this is a bug to report it.

Hi, After iOS 17 software update, we've encountered an anomaly with the video element within our videojs player. Upon video load, there's a noticeable shift and recentring of the video to its correct position. This issue becomes more pronounced when the player is in a horizontal orientation while the video being played is vertical. Additionally, we've observed resizing and cropping issues during the initialization of the player, which were not present in earlier versions. In our current implementation, we have a canvas element inserted before the player. Due to resizing, the video sticks to the canvas and fails to return to the correct position. <div> <video class="vjs-tech" webkit-playsinline playsinline src="hls video source"> </video> <canvas style="filter: blur(15px)" class="vjs-tech custom-canvas" width="412" height="320"> </canvas> </div>

Hello, I am looking for help with displaying Smart Banners on mobile devices. What is the preferred coding that can have Smart Banners appear on all devices? I am having an issue where an Smart Banner is not properly functioning as I would like it to. I would like the CTA (Call-To-Action) to be positioned on the top of a mobile screen. If a user has the mobile app already, it should read OPEN and opens into the app when it is clicked. If the user does not have the app, it should read GET and take a user to the mobile app store when it is clicked.

Please clarify if latest guides update allow to html5 games without binary inclusion. Does that mean that gambling apps do not required embedded resources for real money games in the app?

First: don’t tell me about webkit-reporting. I just get a 502 from there! Ok, what’s the problem? I made an example telling it all: <html> <head> <style> .ext { display: none; color: cyan; } body { max-inline-size: calc(100vi - 12px); &:not(:has(:target)), &:has(p.dft:target) { #ext { display: none; } #dft { display: block; } } &:has(p.ext:target) { #ext { display: block; } #dft { display: none; } } &.ext li { display: none; } &:has(.ext:target) { & li.ext { display: revert; } } } header > p > a::before { color: orange; content: "click me >>> "; } ul { display: flex; } li { margin: 1ex; list-style-type: none; inline-size: max-content; } .yes li::before { font-size: 70%; color: yellow; background-color: blue; content: "(" counters(total, ":") ")"; } ul.nGrp { display: inline flex; counter-reset: nameIndex; & li::after { display: inline-block; counter-increment: nameIndex; font-size: 75%; color: red; vertical-align: sub; content: "(" counter(nameIndex) ")"; } } header { inline-size: 100%; font-size: 2rem; text-align: center; } article { counter-reset: total; padding: 1ex; margin: 1em; &::after { font-size: 3em; color: purple; content: "— [" counter(total) "] —"; } li { counter-increment: total; } outline: 1ex groove purple; } </style> <title>Strange Safari-Count</title> </head> <body lang="de"> <header> <hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup> <p id="dft" class="dft"><a href="#ext">More?</a></p> <p id="ext" class="ext"><a href="#dft">Less!</a></p> <p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p> </header> <article> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> <article class="yes"> <ul> <li class="dft"><p>A1</p></li> <li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li> <li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li> <li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul> </li> <li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li> </ul> <ul> <li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li> <li class="dft"><p>B2</p></li> <li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li> </ul> </article> </body> </html> At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.

Hello, I am experiencing an issue when running a script on Safari, specifically WebKit. Here is a sample HTML code: <!DOCTYPE html> <html lang="en"> <head> <script> function delayedFocus(e) { e.preventDefault(); setTimeout(function() { e.target.focus(); }, 1000); // Adjust the delay time as needed (in milliseconds) } </script> </head> <body> <ul> <li> <input type="text" id="testtext" onmousedown="delayedFocus(event)"> </li> </ul> </body> </html> The logic behind this script is to introduce a 1-second delay when the user clicks on the textbox. After 1 second, the keyboard should appear. Testing on Android mobile devices shows the expected behavior. However, on iPhones, the textbox receives focus, but the keyboard does not appear. This issue has been observed on various iOS versions, with the script working only on iOS 15. If you have any insights or solutions to address this compatibility issue, it would be greatly appreciated. Thank you.

Hi, I have a mobile app that uses iframe to show the html content. I noticed that the link cant be opened on the IOS but its works well on android. Here's general example html code: <iframe id="view-html-viewer-iframe" src="about:blank" frameborder="0"> ... <p><a href="https://google.com/" target="_parent">Google</a></p> ... </iframe> Anyone encounter the same issue.? is there any solution for this.? Thanks.

I have a table with a filter. The table only displays the table rows that matches the filter. In the javascript code, I have a filterInteraction() function that have a commonElements list and display the table rows if they are included in the commonElements list. In my html, when the user click, the filterInteraction() will be triggered. Here's part of my filterInteraction() function (the sensitive code is removed): " function filterInteraction(){ let searchList = searchResult(); let checkboxList = checkboxResult(); let commonElements = searchList.filter(element =&gt; checkboxList.includes(element)); console.log("commonElements ==========", commonElements) var table, tr, i; table = document.getElementById("employeeTable"); let rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); for (i = 0; i &lt; rows.length; i++) { let currentName = rows[i].getElementsByTagName("td")[0].textContent.trim(); if(commonElements.includes(currentName)){ rows[i].style.visibility = "visible"; // rows[i].removeAttribute("hidden"); // rows[i].style.display = ""; } else{ rows[i].style.visibility = "hidden"; // rows[i].setAttribute("hidden", true); // rows[i].style.display = "none"; } } countPart(commonElements.length); }". In this function, I printed the commonElements list, and the list is always correct. However, for the display, it's switching between displaying nothing and displaying the correct rows. (When entering the Safari, the first click on the filter makes the table empty, but the second click displays the correct rows, the next click will make the table displays nothing again .... ). Even during the time that the table display nothing, the commonElements list printed in console is still correct, which means the function does have the correct table rows, but they are not displayed. I tried three different ways to display the table row: "rows[i].style.visibility = "visible"; rows[i].removeAttribute("hidden"); rows[i].style.display = "";". None of them could work without the bug I mentioned above. I tested my filter on Chrome, FireFox, and IE, and my filter works perfectly on them. Any possible way to solve the issue on Safari? Why it has the display bug like this in Safari? Really need help!!! Thanks

Hi, We are facing an issue in our page , The same works fine in other operating systems like android and windows. we are facing this issue only on IOS and MAC(safari browser alone ). We have a loader with us ,which will be shown in 2 different phases in our page. The first time loader will be shown while page is being loaded, the second loader will be shown once the user clicks on pay button. the first loader is not giving any issues for us .But the second loader is not loading completely as you can see in the attached not working image ,the blue circle is being displayed only a 5-10%. It should start from 0 and gradually should reach 100% and again a loop. From the analysis we could see the loader rotates fine after clicking pay button ,but once after page is submitted the issue happens document.paypage.submit(); (code attached below) // this is the form submission in our page // once the control reaches this line we could see the loader is not working fine. the same scenario is checked in android ,but even after page submission the loader works fine, Only in IOS and mac we are facing issue in (safari in mac other browser works fine without any issue), (all browsers in iOS). please direct us to solve the issue Attached images of working and not working scenario Not Working Working Code sample <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loader</title> <style> .loader { position: relative; margin: 0 auto; width: 100px; &:before { content: ""; display: block; padding-top: 100%; } } .circular { animation: rotate 3s linear infinite; height: 100%; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .background-ring { fill: none; stroke: rgb(227, 226, 231); stroke-width: 5; } .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; } @keyframes rotate { 100% { transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 30% { stroke-dasharray: 95, 200; stroke-dashoffset: -30px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes color { 100%, 0% { stroke: rgb(14, 236, 218); } 40% { stroke: rgb(14, 236, 218); } 66% { stroke: rgb(14, 236, 218); } 80%, 90% { stroke: rgb(14, 236, 218); } } body { background-color: var(--white); } .showbox { display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5%; } </style> </head> <body> <div class="showbox"> <div class="loader"> <svg class="circular" viewBox="25 25 50 50"> <!-- Background ring --> <circle class="background-ring" cx="50" cy="50" r="22" /> <!-- Loading circle --> <circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" /> </svg> </div> </div> </body> </html>

Hi, The below code is used for loading GPay icon dynamically from Google in "WKWebView". The same code works for later versions of IOS like 16.4, but issue happens in 16.1 ,16.2 and 16.3 versions. while loading this code from IOS 16.3 the icon (Gpay icon) is completely black, looks like it's not loaded properly. Please assist us on what can be the issue, and how we can proceed to solve the issue. Not working Working

Hi, I've got this html text: "<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>" And I'm trying to show this HTML text properly in a UILabel. This is my codes: String extension to map to NSAttributedString: extension String { func attributedStringFromHTML() -> NSAttributedString? { guard let data = "\(self)" .data(using: .utf8, allowLossyConversion: false) else { Log.error(category: .transaction, message: "Unable to decode data from html string: %@", self) return nil } let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [ .documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue ] if let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) { return attributedString } else { Log.error(category: .transaction, message: "Unable to create attributed string from html string: %@", self) return nil } } } And this is the result: Can you tell me how to fix this? Thanks.

iOS 17 Safari will not successfully open .reality (Reality Composer) files from a weblink. For example, this code works fine on iOS 16: The same code generates this message on iOS 17 after clicking on the link: "Object requires a newer version of iOS." QuickLook fails to render anything. I validated that the .reality file works fine when opened from iOS 17 Files app, so it's not a damaged file.

Basic HTML strings do not display correctly on macOS Sonoma, I am wondering if there is an alternative technique that can be utilized. There was a minor change in macOS 14.2, which fixed some cases but made others much worse. Consider the following code: override func viewDidLoad() { super.viewDidLoad() let html = """ <table width="100%" border="1" style="color: white"> <tr> <td align="left">Left</td> <td align="right">Right</td> </tr> </table> """ let data = Data(html.utf8) let definition = try! NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: NSNumber(value: String.Encoding.utf8.rawValue)], documentAttributes: nil) let frameRect = NSRect(x: 100, y: 0, width: 300, height: 200) let textView = NSTextView(frame: frameRect) textView.textStorage?.setAttributedString(definition) textView.backgroundColor = .clear view.addSubview(textView) } On macOS 14 (23A5312d) it looks like this (FB13170237): On macOS 14.2 (23C64) it looks like this (FB13465833):

In web-based apps we want date pickers to open to a previous month based on the min-max date range specified on the input. We do not want to set a specific day but want the user to select a date. Android devices and Windows OS (Chrome and Edge) all behave as expected, namely, when the calendar loads the first month specified as the min value displays. iOS devices always open the calendar showing the current month and ignore the min/max attributes on the input. Additionally, the current date is selected making it very easy for the use to accidentally choose the wrong date by accidentally closing the date picker. It appears that iOS is the only platform not supporting min/max on date inputs. Will this be fixed? Or is it this by design? For example, today is December 13, 2023, we expect that selecting the following input to open the native calendar displaying November 2023 and to not select a date. <input autocomplete="off" type="date" placeholder="M/d/yy" min="2023-11-01" max="2023-11-30">

Since the update to iOS 17, the pictures in our virtual tours randomly turn very dark and high contrast. They are shown in a canvas so it looks like the entire canvas content is being manipulated. However nothing in our code does this, it happens very randomly (not in every picture and also not in the same pictures every time) and it's only in iOS 17 (not in other iOS versions, not on iPadOs, Mac, Windows, Android, ...). We tried debugging for hours and hours but nothing indicates that this is caused by anything in our code. To try it out yourself: visit https://youreka-virtualtours.be/tours/vyncke_buhler (on mobile of course). Screenshot shows what I mean. Sometime you have to click around randomly. Left screenshot in the side by side is after refresh. You can also see the effect disappears when looking at the browser tabs overview.

The Text inside README.md or any other Markdown files added to the project's bundle, simply are not formatted when previewed in XCode. Almost all of the opensource projects have instructions in Markdown at the top level of the project & even Apple use MD in their sample projects. Magically, the .md files in Apple sample projects are formatted as expected as you can see below, but this isn't the case in any other project. I've also checked the file's settings in the XCode inspector and it didn't differ from the ones existing in the Apple code samples. This is how we are used to view Markdowns in XCode. And this is is the README.md in HappyBeam which is formatted.