I recently updated my iPhone to iOS 15 and suddenly the text inside all the buttons on my website looks blue (when it should be black), both on Safari and Chrome. I don't know what to do.

The cursor doesn't stay in the text field when you scroll the content inside the input field up and down Tested this on the browserStack simulator Source code 1: https://codepen.io/HritikDj/pen/mdqRaXW Source code 2: https://jsbin.com/pivahiwide/1/edit?html,css,output DEMO - 1 : https://vimeo.com/681284745 DEMO - 2 : https://vimeo.com/681293367

I want to change the font-family of only one website, live.com, however, using the method of the "style sheet" only changes fonts on everything Safari browses. "Style sheet" is the function in the "advanced" preferences, creating a text file and setting its extension to ".css". I tried to use @-moz-document domain("live.com") and :root[location*="live.com", among others, at the beginning of my code, but it failed to change the fonts of the elements inside the website. So, for example: @-moz-document domain("live.com") { a, body, button, div, form, html, span, textarea { font-family: monospace; } } couldn't work. If I didn't include the top line and the bottom }, it will be applied to any website I visit, not restricted to the domain, live.com. Is it possible to do my wish? I reached out to the Apple support who eventually redirected me to you. I'll be very grateful to find a solution as a I failed to find such through my own research. Thank you.

I feel this may be a HTML5/Webkit bug related to the canvas element or the way it is repainted (when control comes to that view (I mean page) after going to some other view) when the view is re-rendered, please correct me if this is wrong based on the description. This bug appears to be a generic one observed on iOS 14 & above on both iPhone and iPAD. The bug does not appear till iOS 13.6 (verified on iPAD Air 2019 iOS v13.6) The bug is as follows: The view elements (say text box, input .. esp those at the top) are rendered correctly when the user visits a page first time (e.g. as in goes from page 1 to page 2, then the view elements in page 2 are rendered correctly). Now if the user goes back from page 2 to page 1 & then revisits page 2, the view elements (esp those at the top) disappear. The following video clips can help understand this better: #1 2 mins: https://drive.google.com/file/d/1ycO3YcJeSMA8kmDm6g9ciLUdbEQ-TNbC/view?usp=sharing #2 Less than 25 secs : https://drive.google.com/file/d/1bUBkHQaC0bn6FofLZz2KXTRTg78rF0mx/view?usp=sharing (Please look at both clips) Now if one were to pull and drag down the screen/canvas area at the place where these view elements were originally, then the view elements show up (it's just that they have somehow "gone over the top" after we want back to the earlier page) look at this video clip : https://drive.google.com/file/d/1LKYkqNRrDIE2-f61amMu_gv2QK8lNQf-/view?usp=sharing This bug has been observed in the "HTR Resistor Finder" app using Sencha Touch/Cordova (App store link: https://apps.apple.com/us/app/htr-resistor-finder/id923363496 ). The app has worked perfectly well iOS 7 onwards till iOS 13.6 as also it's working well in all versions of Android 4 onwards till 11, that is the latest Android version. The bug appears to have been introduced due to changes in Webkit in iOS 14 onwards. A bug has been already in Webkit bugzilla https://bugs.webkit.org/show_bug.cgi?id=229231 Please confirm this is being looked into. Hope this can be addressed soon!

We are currently facing a problem with our homepage (https://www.medienwerft.de/), which only occurs when the device is using a backup from an old device. In this case the website has problems with loading headlines, sliders and other elements. Has anyone encountered problems like this before and knows how to solve them? I will attach some screenshots, that depict the mentioned problems and the device information. Thank you in advance. Video not loading headlines on images not loading slider not loading scroll elements content not loading device information

In iOS 15.0, the UI when displaying HTML and HTML in Safari has changed significantly. With this change, when using HTML in Safari, the list will be displayed at a position far away from the inputbox. I'm developing a web page using HTML and I need to solve this problem. Please tell me how to solve it.

Hello. I was wondering if there is any way to manually set the Safari 15 tab color-theme color to my website. It seems like Safari automatically choose the color but I find out that this selection occurs during the first seconds of website load and, because of that, the color being choosen is not the right one for my website. Is there any CSS I could add or a metatag that tells safari which color it should pick? I know this is kinda a wierd request, but I want to provide my visitors the richest experience they could get. Thank you.

I recently updated my iPhone to iOS 15, but input type="date" text-align:left is not applicable.

Hello, With the new iPadOS updates in iPadOS15 we are finally able to print in landscape so my company is trying to migrate our POS systems to tablets as it makes our client experience more seamless. We have designed a coded template for a web pages receipt that allows us to print in a specific format that fits our letterhead. We currently the following code in order to format the printer to automatically print in landscape from Chrome with 0 margin. @Page {Margin:0px orientation:landscape} On iPadOS, the page does not automatically orientate to Landscape in the print which is not the biggest issue, but the Margin:0px is not read even with the Safari>Advanced>Experimental Features>@page CSS at-rule support toggled on. We have attempted to restart the iPad in case it needed a reset to take effect but it still does not seem to follow the at-rule. Is this an issue others are having, or is there a workaround to adjust printout margin?

How do i remove the bounce effect with html/css/js?

So, the problem is that when i try to ship my app as a standalone pwa app, after clicking on an in put and closing the keyboard, double tapping anywhere on the screen causes the screen to move up exacly as much as the height of the keyboard and display what i assume to be the body of my html! there is a similar issue on stackoverflow: https://stackoverflow.com/questions/55120331/white-panel-arrives-on-double-tap-from-bottom-in-pwa-in-standalone-mode which has provided a good example actually: https://pwa-double-tap-bug-ng.firebaseapp.com How is one to solve such a vague issue is beyond me. Any Ideas?

Is there a way to expose an image on top of the screen in a fullscreen player?

I saw this property that I need in the archived docs, https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_calloutHow it is now the correct way to disable the defaults callouts? this seems to not working anymoreThanks in advance

Is it expected behavior for Smart Invert to be inverting an image that is defined using the CSS background-image property? Smart Invert works as expected by not inverting an image defined by the <img> HTML tag but does invert the background-image property image.

I'm having some issues with iOS 15.0.2 version. I added video to my website as a background. So I put it style with fixed position via CSS. But it doesn't showing on iPhone with iOS 15.0.2 version. It's working well on other devices and iPhone with other version except 15.0.2. I tried adding fixed position via JavaScript but it still doesn't work. Whenever I changed position to other values like static or relative, the video was playing well. I can't find any solutions to fix it.

After selecting option using HTML select dropdown and orientation of iPad changes, the dropdown reopens. Is this intended ? What is the reason behind this behavior?

I'm trying to generate a page with a fixed header which has the same color as theme-color and therefore the address bar. I tried to use grid layout or just position: fixed, both have undesired effects. grid, example: https://2qzht.csb.app The content only scrolls with mouse-wheel (or touch on mobile). It's not scrollable on Apple Watch with the crown. fixed, example: https://cdv9k.csb.app Content is scrollable with keyboard and Apple Watch crown. The translucent address bar in Safari 15 now shows the content as it scrolls by and therefore distorting the experience with having the same color at the top of the page including the address bar. I didn't find a fix for the scrolling issue and didn't find anything to disable the translucent address bar or even set the color to the same value as the address bar (including the translucent effect). I found (on some apple pages) that "backdrop-filter: saturate(180%) blur(20px);" might deliver a similar effect, but this is still different than the address bar and breaks if a background-image is used. Is there any way to fix those?

The following problem: I have built a Blazor app where you can move around elements. To do this I use the events 'pointerdown', 'pointermove' and 'pointerup'. It works on all platforms except the PWA variant on IPadOS 14.0 Safari. The incorrect behavior occurs on several IPads, including an IPad 8th Generation, IPad 3rd Generatio and IPad Pro, After that I built a demo application in which the same error occurs and can be reproduced. To reproduce the error, you must try to move one of the elements (green, blue, purple) directly. If you hold one of the elements for 500ms beforehand, the error does not occur and the selected element can be moved without problems. The link to the demo app is https://pointermove.azurewebsites.net/ The link to the repository is https://github.com/Stefan-at-DEVWARE/PointerMoveProblemPWA

Hi, I'm having issues with scrolling on iOS (web). I have a web app that when you click on different pill shaped menus scrolls to the appropriate/related element on the page. When I click a different pill menu when scrolling is happening I get glitches on iOS browsers (safari/chrome) whereas everything is fine on Chrome Android. The wanted behavior is that when you click on the pill the scrolling goes to the needed item with no glitching or pause. I use jQuery's animate to scroll to the needed element and the scroll listener to detect whether the page is at the right position to illuminate the right pill (make it active). Is there any advice/recommendations to fix this issue?

I am printing the contents rendered on a WKWebView using this API. https://developer.apple.com/documentation/webkit/wkwebview/3516861-printoperationwithprintinfo?language=objc The print preview loads fine, but I am unable to print page numbers. I tried overriding the drawPageBorderWithSize method of NSView (since WKWebView inherits from NSView) but that never gets called. I asked a question in the Apple Developer Technical Support and I was asked to use CSS styling to print page numbers. I then tried to use the following solution in CSS: #content { display: table; } #pageFooter { display: table-footer-group; } #pageFooter:after { counter-increment: page; content: counter(page); } <div id="content"> <div id="pageFooter">Page </div> multi-page content here... </div> However, when I try this I only get Page1 at the bottom of the last page. Are there any working solutions for printing page numbers using CSS styling?