Howdy! On Safari, when using the column-count CSS property to split text into multiple columns, I've noticed that when applying a text-shadow, there is an unexpected whitespace created above all subsequent columns. I've put together a codepen demonstrating the issue and its reproducibility on Safari (using latest as of this posting: Version 17.6 (19618.3.11.11.5)) Codepen: https://codepen.io/cubepresser/pen/ExqvzjL Expected behavior: Actual: I tested this on the latest versions of Chrome, Firefox and Edge. This bug does not occur. Expected behavior is that there should not be an extra line added to the beginning of the second column, third column, etc. Here's some code if that codepen link doesn't work: HTML: <p id="example">0000000000111111111122222222223333333333</p> CSS: #example { font-family: monospace; max-width: 20ch; column-count: 2; column-gap: 0; word-break: break-all; line-break: anywhere; text-shadow: 0 0 4px black; }

Hai guys, I'm trying to do autofocus on the search input while user clicks the search icon but its not working as expected in iPhone and iPad so go through some blogs and stackoverflow they mentioned the apple has removed the focus() from touchable device for usablity reason is anyone come up with the same issue or having solution for this kindly share. That must be helpful for me.

Check the attached screenshot, web inspector shows the right element size and position, but Safari renders it in a wrong place. The element reacts on mouse events also correctly - according to its real position. Here you can find the live example https://3dflipbook.net/css-layer-highlight This is a regression issue, it was working fine in 15.6. Bug tracker: https://bugs.webkit.org/show_bug.cgi?id=278898 Please fix the issue.

Hi, here's an example: https://codepen.io/gyurmey2/pen/abgNQdE Is this even a known issue?

when i use font-family:system-ui on the web, i found the text will be smaller on ios 18 beta, the problem also appear on ios 17 when using iphone 15 pro max. It looks ok if i use font-family:PingFang SC instead of system-ui.

when use the css below, the text will be smaller than iOS17. font-family:system-ui If i use font-family: PingFang SC, that will be ok. If system-ui was modified by system?

So the css in this post is broken only on iphones if we view it on an android phone then there is no issues, and I can't figure out why? the scroll background is looking wired, but it's defined by: width: 60px; height: 60px;... Anyhow i'm just wondering why the css is not working as it should? Please help me 🙏

In iOS version 17.4 and above, we have observed that the following code works fine upon the initial opening. However, after minimizing the page and reopening it, there is a chance of encountering issues with abnormal lines. Please note the reproduction conditions: try minimizing the page, opening other apps, and then reopening it multiple times. The code is in the comments section. first time： After minimizing and reopening...

I have a web site that uses CSS linear-gradient with color-mix for a background of a division. It shows up just fine in Safari on iOS and iPadOS 17.4.1. When do a screenshot, and select "Full Page", the background-image becomes all black and the text in the division is unreadable. Here is an example of what I am doing. div.ugly { background-image: linear-gradient(to right, yellow, color-mix(in srgb, red, blue)); } Any ideas how to get this to not turn black? I've tried using a print media query but the "Full Page" screenshot does not use that. It looks like it might be a bug in iOS/iPadOS. Thanks, Mike

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"; } }

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.

overflow-x: clip; will also apply clipping on the Y-axis. The correct implementation of this should only affect the X-axis. This is correctly implemented in all browsers except for Safari

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.

when i touch up on down the page get automatically scrolled here is one gif video to show what i mean : https://s13.gifyu.com/images/SCzSj.gif i am trying to find any css or javascript solution to stop this user experience is bad since user will push a button and page will move

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

Although CanIUse reports only 3% global support for the revert-layer keyword, I've noticed that it seems to work pretty consistently within inline styles (i.e. the style attribute). This got me thinking (hoping) that maybe browser support for revert-layer specifically within inline styles may be much better than reported. However, it's difficult to find any data since I suppose my use case is somewhat uncommon. Can anyone comment on the state of Safari's support for revert-layer specifically within inline styles? I would be extremely grateful for any light you can shed on this.

I have a menu bar which overlays a body scroll in my PWA with styling: position: fixed; bottom: 0px; This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use. The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)). On scroll down With the dialog open This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML: Create a PWA app on a iOS17 device with the following html: https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html Open the app and open and close the dialog a few times. Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog. Eventually you will see the bug. I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use. Thank you!

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.