Hello! In iPhone 15.5, intermittently, some parts of one page, especially the top area, are covered with something that is not the screen I was working on. And if you scroll, that area disappears and you can see the html areas I coded in the past. how can i solve this?

With the iOS version 15.5 the CCS object-fit attribute does not work initially on Safari with videos anymore. When we inspect the DOM and uncheck the attribute, to recheck it, it works. But, of course that's not a proper workaround. Adding "important" does not work as well. If you reset the height: The result is flickering. On 15.4 everything works as expected.

Hello, I am Flip.Shop developer. Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component. Please visit this page: https://flip.shop and scroll through a few posts. On all normal browsers (Chrome/Firefox) the video loads nicely. But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size. Video component looks like this: <video preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline="" src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay="" style="width: 100%; height: 100%;"> </video> and CSS of parent component looks like this: width: 100%; height: 100%; position: relative; & video { object-fit: cover; } Is there any solution to prevent video from going crazy in the Safari browser? The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).

Strange behaviour: when displaying an html file from the computer everything is ok, when the page is displayed from the web server, some class don't work. The class is some very simple like .viola { color: #xxxxxx; } The strange behavior act only with some colours. Some work, some not. On other browsers the page works fine.

When I am applying the CSS property "position: fixed" on the body a white space appears at the bottom of the screen. steps to reproduce the issue: open any page on ios safari hide the address bar by scrolling up apply css property position fixed on body You will see the extra space at the bottom of the screen. This area will be filled with address bar if the address bar is open.

Since the Safari update to 15.4.1, our platform with various CSS transitions, transforms and animations has major rendering problems. Various elements (images/text/areas) are loaded multiple times and flicker very ugly. The same elements placed on another side of the platform don't have the problem. There seems to be some layers conflict and the z-index is not working properly. A workaround is that we set "transformation: translateZ(0)" at the lowest level. This stops the flickering of the elements, but the repainting of the elements remains, which is not optimal in terms of resource consumption. Safari 15.5 Beta-3 doesn't solve the problem.

I recently converted my Chrome extension to a Safari extension using the Apple Conversion tool (XCode CLI). The extension is developed with ReactJS and SaSS. It works very well on Google Chrome but when I try it on Safari after converting it, the local extension works but the CSS file that handles the extension is not applied. There are no errors during the conversion but the Safari developer tool indicates several errors : console tab : Failed to load resource: You are not allowed to access the required resource. network tab : An error occurred while trying to load the resource and the resource was requested in an insecure manner. In the extension, we isolate CSS using iframe : /*global chrome*/ /* src/content.js */ import React from 'react'; import ReactDOM from 'react-dom'; import Frame, { FrameContextConsumer }from 'react-frame-component'; import "./content.css"; class Main extends React.Component { render() { return ( <Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>]}> <FrameContextConsumer> { // Callback is invoked with iframe's window and document instances ({document, window}) => { // Render Children return ( <div className={'my-extension'}> <h1>Hello world - My first Extension</h1> </div> ) } } </FrameContextConsumer> </Frame> ) } } Here is the manifest.json file: { "short_name": "My Extension", "name": "My Extension", "version": "1.0", "manifest_version": 3, "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "action": { "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "default_title": "" }, "background": { "service_worker": "background.js" }, "content_scripts" : [ { "matches": ["<all_urls>"], "css": ["/css/root.css"], "js": ["/static/js/content.js"] } ], "permissions": [ "activeTab", "scripting", "storage" ], "host_permissions": ["https://www.google.com/*"], "web_accessible_resources": [{ "resources": [ "/static/css/content.css", "/static/media/*" ], "matches": ["<all_urls>"] }] } After many attempts, I did not understand the exact origin of the problem and I do not know how to solve it. Do you have any suggestions ?

My app has HTML pages for content, and I have a button-triggered action to change the size of the text by using a set of functions that stepwise increases the WebKit webview text by changing the class of the document body (i.e."smallestText" = CSS webkit-text-size-adjust:80%) using the code below as the last step. On the iPhone simulator, this works perfectly but on the iPad simulator the text size does not change even though the functions are called, the javascriptString is correct, and the _webview contains the web content. I thought this might be a doctype version issue (most of the pages are HTML 4.01 strict) but changed it to HTML5 (!DOCTYPE html) with no change. Any ideas? (void)refreshWebview { NSString *javaScriptString = [NSString stringWithFormat:@"document.body.className = '%@'", self.fontSizeName]; [_webview evaluateJavaScript:javaScriptString completionHandler:nil]; }

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.

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.

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 :)

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'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.