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.

On iOS 15 beta, when I tried to check my application, the select element is having issue. As when I clicked on select dropdown, the option list was not shown. The error message was "Failed to present a context menu for configuration with identifier".

hi, after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly. all i can see is white blank background instead of background video. it looks like video cannot be loaded or played. html: <video playsinline       autoplay       muted       loop       class="uvodna__bg-video" >     <source src="/wp-content/themes/imtsmile2021/video/bg-video.mp4" type="video/mp4" /> </video> can you recommend me some tips to fix that issue? thank you

Hi Guy's,insteadI hope Apple developers also reading this articles, because the functionality of Safari development for Mac OS and iOS is strongly recomended to be changed.First at all I have working on simple site with css styles and html with small additions of Java and see next bug's (or features) provided by apple team.When I'm using safari 13 Develop console and set up ignore cache feature in Network tab is working for all content (html, fonts etc.) instead css stylesheets files. Css content still got by safari from memory and this is ver stupid idea. Always when I need to see my changes I have clean all cached data from all sites using Cmd + Option + R key combination. This method is unusable.More from this - I have connect iPhone with last iOS and mobile Safari version and do the same. Previous version has clean mobile safari cache when I do this action. Buit new version of Development console cleans only Mac Cache data not mobile cache. So, to check the site new look I need clean all mobile saved data included cache, cookies and other saved using my Safari on mobile device.I can't explain who has develop this, but he should be fired and strongly disabled from availiablity to work in IT for all his life. I really hope the solution is found by this community and I'll be grateful to see answers with solution in this thread. Thanks a lot,Alexander.

Every now and then I need to make a website. And I noted in my last project that background-attachment:fixed; is still not supported by iOS. It is by Safari on MacBooks, so I'm wondering what the story behind it is? Surely it is not a matter of computational cost due to the so-called repainting of the browser's canvas? Because doesn't playing video cost a multitude of that?

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

Does anyone know where I can find the embed code for the Apple Download Badge for apps? I have tried ITunes link Maker but there is no-where on it for Apps. I managed to get the Google badge in seconds but for Apple it seems it’s like trying to find the holy grail. I’ve been through 3 different support contacts who have now referred me here. I would really appreciate any up to date info on how to find the code. many thanks!

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.

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.

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