Hey guys! I've got a website and it works fine for every device, except for those using IOS 15.4, i've readed the update notes, but theres nothing that indicates which is the problem on my code or what can i do to solve. Im using NextJS and Styled Components. Here's what happens, i've tested in other IOS's and other devices and it works fine, it's just in those with 15.4 update. Here's how it should work.

I want to change web development environment. do you have good ones? I want to know what Myles used. Please check out 9:30 of this video. https://developer.apple.com/videos/play/wwdc2021/10029/

After my user shelved Safari for a long time and did not close it (a few days), he was unable to request our webpage. After investigation, it was found that the CDN resource request was not sent out. At the same time, chrome is accessed normally. After restarting Safari browser or dig CDN host, it can be accessed normally. I suspect that it is a cache bug of safari 13. It seems that some cache headers of CDN can trigger this bug, resulting in the failure to request resources normally Reproduce Safari version: 13.0.3, 13.0.5, 13.1.3.

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?