Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.

Posts under HTML tag

200 Posts

Post

Replies

Boosts

Views

Activity

Using native image sizes on the web vs responsive sizes
Is there any benefit to using the exact native image size on the web verses an image the scales with the viewports's size? For example, if I have a 1000x1000px 2x image, should I only display it at 500x500px and then use a media query / a different smaller image for smaller screens? Or would the 1000x1000px image scaling to smaller viewports be find? I'm trying to understand the tradeoffs of having a larger image scale with the container since it is less production work and in theory should look good at lower resolutions.
0
0
842
Apr ’23
Safari 11 Bypassing Anti-Auto Play
Hey everyone!I am developing a site which one of it's core features is playing music. It works flawlessly on any browser except for Safari. After hours of investigation I discovered a setting in Safari, preventing websites from auto playing media. Once I disabled this feature (so I allowed auto playing media) the music was being played on Safari flawlessly too.I now need to discover a way to bypass the auto playing media block Safari has implemented as it's default setting. I tried googling around but any problem like mine has remained unanswered, at least from what I found.I know this is possible to fix because so many popular sites (i.e. Netflix, Youtube, Soundcloud, Spotify, etc.) all work perfectly on Safari.Any help would be great, thanks!
5
0
11k
Mar ’23
Advice on implementing Dark Mode CSS with a theme toggle
Working on a website and I want to add a light / dark theme. I also want to add a toggle on the page to switch between those two modes. By default, it goes with the system color theme and then overrides are set with localstorage on the color toggle. What is the best way to implement the styles? Is using css vars with a selector between light and dark the best move? Should there be a default styling and then override based on a data attribute on body? (Would this cause flashing on load?) Any advice helps. Thanks in advance!
4
0
1.4k
Mar ’23
SMS HTML Button
Hi everyone. I designed an HTML template to send out to over 140k customers however, I've run into an issue I just can't seem to figure out. In the email is an HTML Button to send a text message with a pre-written message, that has always worked for Android and iOS. Now during testing, it's not working on iOS and no matter how I alter it, it's not clickable on iOS. Please help me! <a href="sms:/+11234567890?&body=Hello! I would like to place an order!" class="btn" title="">Text US</a> Here is a link to the code to edit and test. http://tpcg.io/_302Q2L I've tested on iOS v16.3.1
0
1
941
Mar ’23
Website images not loading on ios 16 & 16.1 simulator
We have observed that some of the images in a website is not loading properly in newly launched ios 16 and 16.1 simulators, It is working fine on ios 15.5 and lower simulator and on desktop browser as well. We have tried loading site in browsers other that safari but still the issue persist. Is there any workaround for it ? Attaching website url and screenshot for reference Website Url - https://www.jcpenney.com/g/women?division=001%7C008&new_arrivals=view+all+new&id=dept20000013
5
1
3.3k
Mar ’23
Persistence of data in indexeddb when iphone overall storage space low
- Hi all,I am building an offline web application and would like for it to work offline.To do that i will probabily be using appcache or service workers.Regardless, in Chrome on android, if the overall storage space is low, the data stored in indexeddb is deleted, same goes for firefox,UNLESS you specify in both browsers that you want your data to be persisted, aka it will not be deleted unless the end-user clears it.Here are the links for firefox and chrome.https://developers.google.com/web/updates/2016/06/persistent-storage - Chromehttps://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria - SafariThe bottom line is I want my data stored in indexeddb to be persisted unless ofcourse the user deletes it and not be cleared automatically when the OS space is low, as that is what I heard is the mechanism by which safari does it.I cannot find any information on this crucial thing on the internet.
0
1
2.5k
Mar ’23
Image on my web is not displayed correctly
Dear All. I am putting together a web page for a personal project. This page has a cover image in a div that takes up the full width of the screen. My problem appears when I enter this page from an iPhone, the image is not displayed correctly. Only part of the image is visible, as if the image was not resized correctly on the screen. The funny thing is that it only happens on iPhone. From the mac, opening it in any browser emulating the screen of a phone looks correctly, the same happens when I see the page from a mobile with Android. The problem only appears on iPhone and I can't figure out what's going on. I leave some screenshots for you to review the code. Index: Image CSS Responsive CSS
0
0
866
Mar ’23
installed html5 app freezes in ios13 after navigating to an external url in in-app standalone safari browser and back
Issue My web application built using nuxt and installed as web app on iphone becomes unresponsive after I open or visit an external link from the app. Issue specifically comes iOS 13.4 and above on real devices. Simulators works fine. Devices iPhone X and XI (all versions) with iOS 13.4 and above Steps to reproduce Open nuxt-min-pwa.netlify.app safari. Tap on share icon and then add to home screen. Open app from home screen. Tap on menu icon. Tap on second. Tap on link named ICE. App will open an external url. Tap on Back to App button to return to the app. Tap on second now. 10. App does not responds. A thin loading bar seems to be in progress, everytime second is tapped. But nothing else happens. Web app is working fine in iphone8 (tested with ios13.3.1 and ios 13.6.1) and Xcode simulators.
2
0
1.9k
Mar ’23
PresentationDragIndicator disappears in dark mode
Hello. I'm implementing a webview in my app. Recently I'm using presentationDetents(_:) which is supported in iOS 16. And I found a problem in this Instance Method. PresentationDrag Indicator disappears in dark mode. It does not disappear when used in a common View. However, when I use it in htmlView(), this phenomenon appears. [Even if I set Css for dark mode in htmlView(), the result is the same.] I would be grateful if you could tell me how to solve this. Is there any way to control the style of presentationDetents (frame) or PresentationDragIndicator? (I'm aware of the parameters that hide or show the Indicator, but I'm asking if I can have more control over it.) in MainView: ... ... .sheet(isPresented: $activeSheet) { VStack(){ HTMLView(html: urlToOpenInSheet) .presentationDetents([.medium, .large]) .padding(5) } } ... ... in htmlView: struct HTMLView: UIViewRepresentable { let html: String class CoordinatorHTML : NSObject, UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { print(URL) return false } } func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) { DispatchQueue.main.async { let addCss = "<head><style type=\"text/css\">" + """ @font-face { font-family: "Avenir"; } body {font-family: "Avenir"; font-size: 14px; line-height: 1.0; margin: 30px;} """ + " </style></head>" + "<body>" + html + "</body>" let data = Data(addCss.utf8) if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) { uiView.isEditable = false uiView.isSelectable = true uiView.attributedText = attributedString } } } func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView { let uiTextView = UITextView() uiTextView.delegate = context.coordinator uiTextView.isScrollEnabled = true uiTextView.backgroundColor = UIColor.white return uiTextView } func makeCoordinator() -> CoordinatorHTML { return CoordinatorHTML() } } And attached image: Light Mode Dark Mode
1
0
944
Feb ’23
AutoFill code from OTP SMS in input which is inside a shadow DOM not working
Hi all, I'm trying to implement an OTP code input that allows auto-complete code from OTP SMS in Safari (IOS 16.2) When the input is placed in the DOM, everything is working well and I get the option to autofill the code from SMS But when I placed the same input inside a shadow DOM, I'm not longer get the option to auto fill it from SMS Is there a way to make it work also for inputs which are inside a shadow DOM? (Attached sample HTML file that demonstrates the problem) index.html
0
0
1.7k
Feb ’23
HTML5 Video in a PWA App Stuck on 1 video
I am getting so frustrated. I have thousands of clients. I have created a PWA app with HTML5 video as my training content. The way it works is I have written this content using Ionic Angular. I have created a HTML5 tag. with a video src in it. The video is played inline. Whenever a client clicks on a next or previous button it changes the src of the video to another video. It was working. Most of my clients use PCs, but some use MACs or iphones. The macs and iphones use to work but now suddenly there is a problem that the video just stays cached so it never changes. Even if the clients are using Google chrome instead of Safari. It works on all PCs. Can't seem to find an answer on how to fix this. It seems every time apple comes out with a new update to their operating system something in my system breaks. we create our programs using PWA's because we can't change our pricing structures to meet the pricing structures of the apple or the google play stores. and I'm not the best programmer in the world so I do not really understand what is going on here. Is there anyone out there who can help me. thanks so much in advance.
1
0
1.1k
Feb ’23
copytext document.execCommand('copy') is deprecated so IOS devices not supporting
I have text in webapp when select some text and clicked on copytext button,in desktop its working fine by using document.execCommand('copy') but its not working in IOS devices like ipad/iphone.is it ave any alternative method for this. when i select rich text from webapp clicked on copytext button then pasted in word in desktop its working fine with format and styles, but in ios(ipad..) its not pasted any content.its nothing copied. when i select text we are getting selectedtextRange as plain text so how we can get with styles. let selectedText = RangeUtils.getPlainTextFromRange(this.selectedTextRange); this.clipboardService.copyFromContent(selectedText);
0
0
997
Jan ’23
Object-fit: fill does not work on safari for autoplay videos
I have applied object-fit fill to a video element. This video element spans entire screen and is set to 100vh height and 100vw width. In Chrome and Firefox it works fine and the video is stretched to fill the screen. However on safari object-fit fill does not stretch the video. Object-fit cover works fine, but fill doesn't. This video is set to autoplay. I have another hidden video element that plays a video on loop and shares the same space as the above mentioned video and is shown when the above mentioned video finishes playing. This video playing on loop stretches on applying obect-fit fill, but the other video doesn't stretch to fill the screen. Please help me with this. I have tried almost all CSS suggestion with min-height, position:relative, etc. but none have worked.
1
3
2.4k
Jan ’23
Iphone App written with Cordova and standard web technologies.
Can anyone give me a definitive answer to the following. I know a number of web technologies but not Swift or Xcode. I wish to write an app that makes use of Cordova and standard web technologies that will be accepted when submitted to the App Store. The one thing that I don't wish to do is spend the next four plus weeks developing it only to find it will be rejected. I don't really have time to expand my knowledge of Swift at this juncture. I have read so many contradicting rules so any guidance would be really appreciated. Many thanks.
2
0
2.5k
Jan ’23
WebView Scale / Size / Resolution
I am using a WebView to render a couple of HTML pages which I do not have any control over. Unfortunately the rendered HTML appears very small on a typical iphone screen. What can I do to zoom, or scale, or change the resolution of the WebView to make the content appear larger? I have investigated .scaleFactor(), but that does a sort of "raster"-scale, which means the content becomes pixelated and the content does not "flow" to fit the viewport (i.e. there is no effective "adaptive web design"). Also, .scaleFactor() moves the view around in odd ways such as falling off the edges of the screen or eclipsing other adjacent views which were not eclipsed before the scaling is performed. What options (besides scaleFactor() on a WebView) do I have to make my HTML content appear larger? Thanks in advance.
Topic: Safari & Web SubTopic: General Tags:
0
0
1.5k
Jan ’23
Using native image sizes on the web vs responsive sizes
Is there any benefit to using the exact native image size on the web verses an image the scales with the viewports's size? For example, if I have a 1000x1000px 2x image, should I only display it at 500x500px and then use a media query / a different smaller image for smaller screens? Or would the 1000x1000px image scaling to smaller viewports be find? I'm trying to understand the tradeoffs of having a larger image scale with the container since it is less production work and in theory should look good at lower resolutions.
Replies
0
Boosts
0
Views
842
Activity
Apr ’23
Safari 11 Bypassing Anti-Auto Play
Hey everyone!I am developing a site which one of it's core features is playing music. It works flawlessly on any browser except for Safari. After hours of investigation I discovered a setting in Safari, preventing websites from auto playing media. Once I disabled this feature (so I allowed auto playing media) the music was being played on Safari flawlessly too.I now need to discover a way to bypass the auto playing media block Safari has implemented as it's default setting. I tried googling around but any problem like mine has remained unanswered, at least from what I found.I know this is possible to fix because so many popular sites (i.e. Netflix, Youtube, Soundcloud, Spotify, etc.) all work perfectly on Safari.Any help would be great, thanks!
Replies
5
Boosts
0
Views
11k
Activity
Mar ’23
Advice on implementing Dark Mode CSS with a theme toggle
Working on a website and I want to add a light / dark theme. I also want to add a toggle on the page to switch between those two modes. By default, it goes with the system color theme and then overrides are set with localstorage on the color toggle. What is the best way to implement the styles? Is using css vars with a selector between light and dark the best move? Should there be a default styling and then override based on a data attribute on body? (Would this cause flashing on load?) Any advice helps. Thanks in advance!
Replies
4
Boosts
0
Views
1.4k
Activity
Mar ’23
SMS HTML Button
Hi everyone. I designed an HTML template to send out to over 140k customers however, I've run into an issue I just can't seem to figure out. In the email is an HTML Button to send a text message with a pre-written message, that has always worked for Android and iOS. Now during testing, it's not working on iOS and no matter how I alter it, it's not clickable on iOS. Please help me! <a href="sms:/+11234567890?&body=Hello! I would like to place an order!" class="btn" title="">Text US</a> Here is a link to the code to edit and test. http://tpcg.io/_302Q2L I've tested on iOS v16.3.1
Replies
0
Boosts
1
Views
941
Activity
Mar ’23
Website images not loading on ios 16 & 16.1 simulator
We have observed that some of the images in a website is not loading properly in newly launched ios 16 and 16.1 simulators, It is working fine on ios 15.5 and lower simulator and on desktop browser as well. We have tried loading site in browsers other that safari but still the issue persist. Is there any workaround for it ? Attaching website url and screenshot for reference Website Url - https://www.jcpenney.com/g/women?division=001%7C008&new_arrivals=view+all+new&id=dept20000013
Replies
5
Boosts
1
Views
3.3k
Activity
Mar ’23
Persistence of data in indexeddb when iphone overall storage space low
- Hi all,I am building an offline web application and would like for it to work offline.To do that i will probabily be using appcache or service workers.Regardless, in Chrome on android, if the overall storage space is low, the data stored in indexeddb is deleted, same goes for firefox,UNLESS you specify in both browsers that you want your data to be persisted, aka it will not be deleted unless the end-user clears it.Here are the links for firefox and chrome.https://developers.google.com/web/updates/2016/06/persistent-storage - Chromehttps://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria - SafariThe bottom line is I want my data stored in indexeddb to be persisted unless ofcourse the user deletes it and not be cleared automatically when the OS space is low, as that is what I heard is the mechanism by which safari does it.I cannot find any information on this crucial thing on the internet.
Replies
0
Boosts
1
Views
2.5k
Activity
Mar ’23
Image on my web is not displayed correctly
Dear All. I am putting together a web page for a personal project. This page has a cover image in a div that takes up the full width of the screen. My problem appears when I enter this page from an iPhone, the image is not displayed correctly. Only part of the image is visible, as if the image was not resized correctly on the screen. The funny thing is that it only happens on iPhone. From the mac, opening it in any browser emulating the screen of a phone looks correctly, the same happens when I see the page from a mobile with Android. The problem only appears on iPhone and I can't figure out what's going on. I leave some screenshots for you to review the code. Index: Image CSS Responsive CSS
Replies
0
Boosts
0
Views
866
Activity
Mar ’23
installed html5 app freezes in ios13 after navigating to an external url in in-app standalone safari browser and back
Issue My web application built using nuxt and installed as web app on iphone becomes unresponsive after I open or visit an external link from the app. Issue specifically comes iOS 13.4 and above on real devices. Simulators works fine. Devices iPhone X and XI (all versions) with iOS 13.4 and above Steps to reproduce Open nuxt-min-pwa.netlify.app safari. Tap on share icon and then add to home screen. Open app from home screen. Tap on menu icon. Tap on second. Tap on link named ICE. App will open an external url. Tap on Back to App button to return to the app. Tap on second now. 10. App does not responds. A thin loading bar seems to be in progress, everytime second is tapped. But nothing else happens. Web app is working fine in iphone8 (tested with ios13.3.1 and ios 13.6.1) and Xcode simulators.
Replies
2
Boosts
0
Views
1.9k
Activity
Mar ’23
mac.com
Wie kann ich meine alte E-Mail Adresse wieder Aktiviren, p.herrmann@mac.com?
Replies
1
Boosts
0
Views
759
Activity
Feb ’23
PresentationDragIndicator disappears in dark mode
Hello. I'm implementing a webview in my app. Recently I'm using presentationDetents(_:) which is supported in iOS 16. And I found a problem in this Instance Method. PresentationDrag Indicator disappears in dark mode. It does not disappear when used in a common View. However, when I use it in htmlView(), this phenomenon appears. [Even if I set Css for dark mode in htmlView(), the result is the same.] I would be grateful if you could tell me how to solve this. Is there any way to control the style of presentationDetents (frame) or PresentationDragIndicator? (I'm aware of the parameters that hide or show the Indicator, but I'm asking if I can have more control over it.) in MainView: ... ... .sheet(isPresented: $activeSheet) { VStack(){ HTMLView(html: urlToOpenInSheet) .presentationDetents([.medium, .large]) .padding(5) } } ... ... in htmlView: struct HTMLView: UIViewRepresentable { let html: String class CoordinatorHTML : NSObject, UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { print(URL) return false } } func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) { DispatchQueue.main.async { let addCss = "<head><style type=\"text/css\">" + """ @font-face { font-family: "Avenir"; } body {font-family: "Avenir"; font-size: 14px; line-height: 1.0; margin: 30px;} """ + " </style></head>" + "<body>" + html + "</body>" let data = Data(addCss.utf8) if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) { uiView.isEditable = false uiView.isSelectable = true uiView.attributedText = attributedString } } } func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView { let uiTextView = UITextView() uiTextView.delegate = context.coordinator uiTextView.isScrollEnabled = true uiTextView.backgroundColor = UIColor.white return uiTextView } func makeCoordinator() -> CoordinatorHTML { return CoordinatorHTML() } } And attached image: Light Mode Dark Mode
Replies
1
Boosts
0
Views
944
Activity
Feb ’23
AutoFill code from OTP SMS in input which is inside a shadow DOM not working
Hi all, I'm trying to implement an OTP code input that allows auto-complete code from OTP SMS in Safari (IOS 16.2) When the input is placed in the DOM, everything is working well and I get the option to autofill the code from SMS But when I placed the same input inside a shadow DOM, I'm not longer get the option to auto fill it from SMS Is there a way to make it work also for inputs which are inside a shadow DOM? (Attached sample HTML file that demonstrates the problem) index.html
Replies
0
Boosts
0
Views
1.7k
Activity
Feb ’23
HTML5 Video in a PWA App Stuck on 1 video
I am getting so frustrated. I have thousands of clients. I have created a PWA app with HTML5 video as my training content. The way it works is I have written this content using Ionic Angular. I have created a HTML5 tag. with a video src in it. The video is played inline. Whenever a client clicks on a next or previous button it changes the src of the video to another video. It was working. Most of my clients use PCs, but some use MACs or iphones. The macs and iphones use to work but now suddenly there is a problem that the video just stays cached so it never changes. Even if the clients are using Google chrome instead of Safari. It works on all PCs. Can't seem to find an answer on how to fix this. It seems every time apple comes out with a new update to their operating system something in my system breaks. we create our programs using PWA's because we can't change our pricing structures to meet the pricing structures of the apple or the google play stores. and I'm not the best programmer in the world so I do not really understand what is going on here. Is there anyone out there who can help me. thanks so much in advance.
Replies
1
Boosts
0
Views
1.1k
Activity
Feb ’23
copytext document.execCommand('copy') is deprecated so IOS devices not supporting
I have text in webapp when select some text and clicked on copytext button,in desktop its working fine by using document.execCommand('copy') but its not working in IOS devices like ipad/iphone.is it ave any alternative method for this. when i select rich text from webapp clicked on copytext button then pasted in word in desktop its working fine with format and styles, but in ios(ipad..) its not pasted any content.its nothing copied. when i select text we are getting selectedtextRange as plain text so how we can get with styles. let selectedText = RangeUtils.getPlainTextFromRange(this.selectedTextRange); this.clipboardService.copyFromContent(selectedText);
Replies
0
Boosts
0
Views
997
Activity
Jan ’23
Object-fit: fill does not work on safari for autoplay videos
I have applied object-fit fill to a video element. This video element spans entire screen and is set to 100vh height and 100vw width. In Chrome and Firefox it works fine and the video is stretched to fill the screen. However on safari object-fit fill does not stretch the video. Object-fit cover works fine, but fill doesn't. This video is set to autoplay. I have another hidden video element that plays a video on loop and shares the same space as the above mentioned video and is shown when the above mentioned video finishes playing. This video playing on loop stretches on applying obect-fit fill, but the other video doesn't stretch to fill the screen. Please help me with this. I have tried almost all CSS suggestion with min-height, position:relative, etc. but none have worked.
Replies
1
Boosts
3
Views
2.4k
Activity
Jan ’23
Iphone App written with Cordova and standard web technologies.
Can anyone give me a definitive answer to the following. I know a number of web technologies but not Swift or Xcode. I wish to write an app that makes use of Cordova and standard web technologies that will be accepted when submitted to the App Store. The one thing that I don't wish to do is spend the next four plus weeks developing it only to find it will be rejected. I don't really have time to expand my knowledge of Swift at this juncture. I have read so many contradicting rules so any guidance would be really appreciated. Many thanks.
Replies
2
Boosts
0
Views
2.5k
Activity
Jan ’23
iOS 15.0 and iOS 16.0 - Focus doesn't move to links (<a> element) when pressing tab/shift+tab in external keyboard
While pressing tab/shift+tab using external keyboard focus doesn't move to tag elements even with tabIndex=0. This is my javascript code <a href="https://discussions.apple.com/" tabIndex={0}>Click here</a> Focus moves to all other html elements except link element.
Replies
1
Boosts
1
Views
1.5k
Activity
Jan ’23
WebView Scale / Size / Resolution
I am using a WebView to render a couple of HTML pages which I do not have any control over. Unfortunately the rendered HTML appears very small on a typical iphone screen. What can I do to zoom, or scale, or change the resolution of the WebView to make the content appear larger? I have investigated .scaleFactor(), but that does a sort of "raster"-scale, which means the content becomes pixelated and the content does not "flow" to fit the viewport (i.e. there is no effective "adaptive web design"). Also, .scaleFactor() moves the view around in odd ways such as falling off the edges of the screen or eclipsing other adjacent views which were not eclipsed before the scaling is performed. What options (besides scaleFactor() on a WebView) do I have to make my HTML content appear larger? Thanks in advance.
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.5k
Activity
Jan ’23
Availability of letterSpacing <canvas> in Safari?
Do you have any idea when the "letterSpacing" property of CanvasRenderingContext2D API will be implemented in Safari? This feature is really useful for those who, like me, work with fonts on canvas. https://caniuse.com/mdn-api_canvasrenderingcontext2d_letterspacing
Replies
0
Boosts
0
Views
985
Activity
Jan ’23
Creating IPA from HTML files
Hello, I've created a product presentation using html5 and I want to build an app for my colleagues to show it on the iPad to their customers. How can I add that html files to an Xcode project to create the ipa? Thanks!!
Replies
0
Boosts
0
Views
983
Activity
Jan ’23
Why does icloud.com use HTML canvas tag?
Because the icloud.com notes etc. are implemented with Canvas it makes it impossible to dabble around with f.ex. dark reader. Any explanations or guesses why they decided to implement it with canvas and not text?
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1k
Activity
Jan ’23