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.

My website shows a video using video tag which worked perfectly until not long ago. The video is working but when pressing on full screen, the video is playing but the screen is black while the sound is still playing. The issue occurs only on iPhones with iOS 15 (using Safari and Chrome also). Things I've tried: I've tried playing the video directly with a URL to the actual file(to check its not codec issue) and it worked properly. My video tag has 'position: absolute;' on it and I tried removing it(even though it breaks my layout) and that didn't work either. Tried pausing the video immediately and playing it after the video loads. Tried applying a background: white; or any non-transparent color to the video tag. Tried removing auto play. Tried to disable 'GPU process: Media' on safari settings just to check if that affects anything and it didnt. This is the html: <video data-test-id="long-video" #longVideo muted controls playsinline [class.d-none]="!isShortVideoHidden" *ngIf="isPageLoaded" src="https://cdn1.someurl.com/videos/commercial_1.mp4" type="video/mp4"> </video> and the css(with the parent): @media only screen and(min-width:992px) { .fixed-video { position: fixed; z-index: 10000; margin: auto; width: 100vw; height: 100vh; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); transition: 0.4s; video { width: 80%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } } } Please tell me if you have struggled with this and know how to solve it. 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 &lt;img&gt; 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

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?

Dose Apple have any official documentation to study HTML/CSS/JavaScript ? Kind Regards