For example, this video
does not work in Safari either through the video tag or through simply opening the link.
I can't figure out what exactly is wrong with this video, since most of the others work well.
Any advice?
HTML
RSS for tagHypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
Posts under HTML tag
59 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Hello!
I am someone who creates websites.
When I click a link within an iframe, the screen briefly turns white.
(This link navigates within the iframe, and the parent frame does not navigate.)
I haven't specified any background-color or styling within the iframe, including the body.
However, it turns briefly white during the transition, probably due to a rendering issue.
This issue doesn't occur on other devices (android).
Can this be resolved with CSS, or is it a bug?
PC
MAC OS / 13.4 (22F66)
Safari / 16.5 (18615.2.9.11.4)
iPhone
IOS / 16.1.1
Safari / unknown
iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177
I create a simple html and try to run on iPad. Although I set the height to 100vh, there is a vertical scrollbar on the right, and I could scroll down to a total empty page. It seems like the total height is more than 200vh.
The web page works on Safari, but not work in iPad chrome.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>
css:
body {
height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: 100vh;
height: -webkit-fill-available;
}
I'm trying to read the clipboard data using the navigator.clipboard.readText() in the button click handler:
<body>
<h1>How to paste text</h1>
<p><button type=button>Paste</button></p><textarea></textarea>
<script>
const pasteButton = document.querySelector("button");
pasteButton.addEventListener("click", (async () => {
try {
const e = await navigator.clipboard.readText();
document.querySelector("textarea").value += e;
console.log("Text pasted.")
}
catch (e) {
console.log("Failed to read clipboard. Using execCommand instead.");
document.querySelector("textarea").focus();
const t = document.execCommand("paste");
console.log("document.execCommand result: ", t)
}
}));
</script>
</body>
We can use the following link to check the demo page using the above code:
https://web.dev/patterns/clipboard/paste-text/demo.html
The demo page works fine when clicking the Paste button on the Chrome browser.
But, it shows the Paste menu when clicking the Paste button on the Safari browser.
Only when clicking the Paste menu on the Safari browser, the clipboard data is pasted into the text box.
So, I'd like to know how to hide the "Paste" menu on Safari browser when using navigator.clipboard.readText() in the button click handler.
Thanks.
When typing into HTML input type=date picker if you want a second or 2 what you previously typed will be overwritten.
For example if you highlight the year and you want to type in '2023'.
You type in '20' (wait 2 seconds) and then type in '23' the previous '20' you typed will be overwritten.
So we have an App (on Web & iOS environment), in which we still have not yet set up the Smart App Banner, but the Banner is shown on Safari on several pages.
What we have on the project though is a list of Download pages to Play & Google Store in our About page which like the attachment below
Here is the SAP being shown on only several pages:
On Homepage it's not shown
Upon clicking the profile picture and opening a Setting page, the SAP is shown
On the Setting page, if we click Workspace, it still shows the SAP
But when we are clicking the individual Workspace after that, the SAP is missing
Because of this behavior, some of our page layouts are broken, thus we need to find a way to overcome this.
To clarify this, we have 2 questions in mind, which is:
On https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners, it's shared that the SAP can only be set via a meta tag. As this bug is appearing on the Web environment, is there any other way to set the SAP rather than with meta, that might be the result of this bug?
If we init the SAP via meta tag will it replace the existing SAP completely? If yes, then we can just use the configured meta to fix this.
Nevertheless, the help and guidance on this are deeply appreciated.
Thanks
Wondering if anyone has come across this issue.
When a element has text in a element in an HTML table, VoiceOver will announce the text in the second element first, even if it comes after the text that visually (and programmatically) comes before it. This also happens with nested span elements. It does not happen with cells.
For example:
Replicable on:
Safari/iOS 16.6 with VoiceOver
Edge 113.0.17 with VoiceOver
Please see you can replicate here: https://codepen.io/ayesha-2303/full/eYQqbXX
Is this expected functionality or is it a bug? How can I raise it if it is a bug?
Hi,
I am trying to override some properties on iPad Air 5 with media query. I am using Safari, but the query should work with Chrome also.
I have tried several combinations, but it seems that nothing works. For example I have tried this queries:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
body {
font-size: 20px;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body {
font-size: 20px;
}
}
@media only screen
and (-webkit-min-device-pixel-ratio: 2) {
body {
font-size: 20px;
}
}
Does anyone know what is the problem?
Best regards!
Hello,
I am developing a firewall against http attacks at Layer7 layer. And no system (linux/windows/android/bsd/ios version < 16) works flawlessly, except for ios 16 version.
İos 16 device screen record (error): veed . io/view/ab86584b-c054-4b70-8c73-6ae9782fabad)
Old ios version test (no error):
I am using a golang http service in addition to nginx in the opened url. And when I try to access this golang code directly (ios16) I get 503 error from a device. And all this http service does is to set a cookie on the client after getting the useragent and ip information.
Code:
What new feature in iOS 16 prevents my service from running? and how can i fix this.
Note: In iOS 16, the situation is the same in all browsers, not just safari, I tried it on chrome. However, there is no problem when I try it on 15 and lower versions, which is a lower version.
Thanks for your help in advance.
In an attempt to expose the capabilities of NSAttributedString in combination with UITextView to the world of SwiftUI (specifically the ability to render basic HTML), I've wrapped UITextView in a UIViewRepresentable and used that in a custom SwiftUI View.
But I'm seeing some issues I can't really explain... So I would love to get a deeper understanding of what's going on. And possible also find a way to fix these issues in an appropriate way.
This is how it goes:
UIViewRepresentable wrapping UITextView to display NSAttributedString in the context of SwiftUI
import SwiftUI
struct AttributedText: UIViewRepresentable {
private let attributedString: NSAttributedString
init(_ attributedString: NSAttributedString) {
self.attributedString = attributedString
}
func makeUIView(context: Context) -> UITextView {
let uiTextView = UITextView()
// Make it transparent so that background Views can shine through.
uiTextView.backgroundColor = .clear
// For text visualisation only, no editing.
uiTextView.isEditable = false
// Make UITextView flex to available width, but require height to fit its content.
// Also disable scrolling so the UITextView will set its `intrinsicContentSize` to match its text content.
uiTextView.isScrollEnabled = false
uiTextView.setContentHuggingPriority(.defaultLow, for: .vertical)
uiTextView.setContentHuggingPriority(.defaultLow, for: .horizontal)
uiTextView.setContentCompressionResistancePriority(.required, for: .vertical)
uiTextView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
return uiTextView
}
func updateUIView(_ uiTextView: UITextView, context: Context) {
uiTextView.attributedText = attributedString
}
}
Used in a custom HTML SwiftUI View
import SwiftUI
struct HTML: View {
private let bodyText: String
init(_ bodyText: String) {
self.bodyText = bodyText
}
var body: some View {
AttributedText((try? NSAttributedString(
data: """
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font: -apple-system-body;
color: white;
}
</style>
</head>
<body>
\(bodyText)
</body>
</html>
""".data(using: .utf8)!,
options: [
.documentType: NSAttributedString.DocumentType.html,
.characterEncoding: NSUTF8StringEncoding,
],
documentAttributes: nil
)) ?? NSAttributedString(string: bodyText))
}
}
Put together in a simple SwiftUI app
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
ScrollView {
HTML("""
<p>This is a paragraph</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
""")
}
.navigationTitle("HTML in SwiftUI")
}
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Now, when I build and run the simple SwiftUI app shown above, it renders just fine, but there is a lot of log entries similar to "=== AttributeGraph: cycle detected through attribute 24504 ===". In addition to that, the navigation title bugs out when I scroll up. It also seems like SwiftUI is not able to detect changes to the HTML View, and does not re-evaluate its body if I re-create HTML with a new bodyText (even though its structural identity is preserved).
When I use Instruments to inspect SwiftUI View body invocations, I can see that initiating the inline HTML styled NSAttributedString in the HTML View's body takes several milliseconds (not too surprising as it calls into WebKit stuff?), resulting in HTML.body taking more than 15 milliseconds to complete. Which is a lot more than if i just instantiated a "pure" text string using e.g the NSAttributedString(string:) initialiser.
The initial render also seem to call HTML.body twice, a second time after calling the body of some View labeled "RootModifier" (Maybe the invocation of HTML.body took too long, and SwiftUI tries again?).
Now, I acknowledge that all these signs yell "do not call computational heavy stuff inside a View's body!", but still, I would love to understand why SwiftUI complains about cycles in its AttributeGraph (as I can't really see any), and why SwiftUI does not re-evaluate HTML's body if I re-create HTML with a new bodyText (as HTML's initialiser is clearly called with a new and different bodyText value).
I could also just completely drop the custom HTML SwiftUI View, and just use the AttributedText UIViewRepresentable directly. And then fully manage instances of HTML styled NSAttributedStrings in my model layer (and not instantiate them as part of some custom SwiftUI View). But that would remove some of the abstraction and readability of having a dedicated SwiftUI View for rendering HTML. So any suggestions on how to create such an abstraction/SwiftUI View would be greatly appreciated as well!
I'm putting together a really simple demo/learning app to try out some of the new features of iOS 17, and I've found when adding a Map to an existing TabView, the map is extending itself over the tab, which is actually still visible and can be interacted with, but is basically hidden.
There may be a modifier or something I'm missing to tell the map to stay in its frame, but I haven't found it. I have tried ones like safeAreaInsets, but that didn't seem to be right.
Here's my super-simple view:
TabView {
Text("Not the map")
.tabItem {
Label("Not Map", systemImage: "person")
}
Map()
.tabItem {
Label("Map", systemImage: "map")
}
}
And here's how it looks in the Simulator:
I will file a feedback for this, but didn't want to too quickly assume it's a bug when it's just as likely I'm not doing something right (if not more so).
Hello, I'm trying to learn swift and making the Landmarks tutorial I found a problem with the map view. The error read as follow: "'init(coordinateRegion:interactionModes:showsUserLocation:userTrackingMode:)' was deprecated in iOS 17.0: Use Map initializers that take a MapContentBuilder instead."
My code is:
import MapKit
struct MapView: View {
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
// The error happens here!
var body: some View {
Map(coordinateRegion: $region)
}
}
#Preview {
MapView()
}
Any suggestions about hot to solve this will be appreciate it.
Thanks,
BR
Skalex
Hello,
We're testing our app using iOS 17 beta to see if there's any problem, and we encountered an issue with an image rendered using HTML5 canvas having the alpha layer turning to white (See screenshot below) This happens not just our website but to other website as well. Both in UIWebView and Safari Browser.
Is this going to be fixed before the actual release of iOS 17? or do we have to tweak our code somewhere in order to fix this?
Thanks!
Regards,
Byron Bautista
I have an IOS app with a Web View. The website have a fixed header and footer. Since the update to 14.4.1 the header is pushed down, and the footer becomes invisible when the page is scrolled.
Hello,
I'm working for an IT company which edit Web apps and we use HTML tags with type="date" and type="time". Actually, we've got different problems on Safari (what I read was that these problems appeared with Safari 16).
For and , the User Agent of Safari create tags inside tags (with pseudo-class "-webkit-datetime-edit-day-field" for instance) to display "ghost"/faked data when the value is empty or NULL (in fact, Safari display the current date, in the local format, in ). This behavior is really problematical for us because these inputs don't have to be filled every time (they are not required and don't have the attribute "required"), but they appear filled to our users... When you submit the form, the value is really empty (no value returned and that is what we want) but "something" is always displayed. We found a CSS trick to hide these things to our users but I think it's not normal, isn't it ? Can we block this Safari behavior ?
Second problem : for , they are not editable anymore if their value is empty (we detect it thursday, April 6th 2023). However, if we put a specific value when we load the page, then we delete this value in the form, and then we change the value without loosing the focus of the input, it works. If we loose the focus, we can't click on the input to change its value or something else. Do you know the reason why ? For now, we are forced to change the type of these inputs to type="text" when users are on Safari in Javascript... Nevertheless, the official documentation (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) talks about compatibility between and Safari. Any idea ?
Thank you for your time.
Good morning!
I am developing an iOS app that gets its data from an API and displays it in a list. The list item view has NavigationLink embedded in it that sends users to a detail view. In this detail view, I have some Text views but the issue I am running into is a WKWebView that I have implemented to display some HTML that's is retrieved from the API call.
The WKWebView displays the HTML just how I want it to. The issue I have is in the HyperLinks that are displayed in the WKWebView. When a user taps on a link, it opens inside of the web view. Instead of opening in the web view, I would like this link to open in the user's default web browser. I have searched and found ways of doing this in older versions of Swift using classes but my web view is initialized inside of a struct that conforms to the UIViewRepresentable protocol.
I don't know how to get links to open in the browser instead of the WebView so any help would be appreciated. Here is the code for my WebView that is being used on the details page.
struct NewsItemWebView: UIViewRepresentable {
// HTML from API Call
var text: String
// Method to create the View
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
// Method to update the View by changing properties of the WebView
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.isOpaque = false
uiView.backgroundColor = UIColor.white
uiView.loadHTMLString(text, baseURL: nil)
}
}
Here is how I am implementing the WebView on DetailView
NewsItemWebView(text: item.PageContent)
.frame(height: 450)
Any help on how I can make links open in a browser would be great. Thanks in advance.
Currently in iOS Safari and Chrome, when you share a link via the share button, the link that gets copied is the canonical URL. The site that I am working on has a different website listed as the canonical URL (it's a requirement that can't be changed). Is it possible to force iOS Safari and Chrome so copy my website's original URL, instead of the canonical URL?
My canonical urls are included in my site via the following tag:
<link rel="canonical" href="www.example.com">
::-webkit-scrollbar-thumb does not work in iOS 13 devices, Need to change thumb colour from black to white for dark background.
Tried below solution but not working.
::-webkit-scrollbar-thumb {
background: white;
}
Any suggestions.
Thanks
webkitEnterFullScreen API is supported on iOS for video element, but not for a div element. Also as a fullscreen demo website shown, Safari on macOS supports div element but not on iOS. Is there any plan to add the support in iOS? If not is there any way to fullscreen a div element or make it run as fullscreen on Safari iOS?