Difficulty Loading CSS in WKWebView

I'm attempting to develop a basic WebView application utilizing UITabBarController. Strangely, the CSS fails to load when I incorporate the Tab Bar. However, if I switch back to a regular View Controller without any other modifications to the code, the CSS loads perfectly fine.

let request: NSMutableURLRequest = NSMutableURLRequest(url: myUrl)

    if (webView != nil) {

    } else {
        self.loadView()
        self.webView.navigationDelegate = self
    }
    if (self.finishedUrl != myUrl.absoluteString) {
        webView.load(request as URLRequest)
    }
ioscssswiftwebviewwkwebview

Answer №1

After some investigation, I managed to identify the issue at hand - which turned out to be related to the presence of a trailing slash (/) in the URL. Surprisingly, adding a slash to the end of the URL prevented CSS from loading properly. On the other hand, omitting the slash ensured that the CSS files were loaded correctly.

Answer №2

I encountered a similar issue, but none of the solutions provided here were effective for me. I found that removing the folder path from the link resolved the problem, even if the files were located within those folders in my Bundle.

Instead of:

<link rel="stylesheet" href="css/style.css" />

I removed the folder reference and used:

<link rel="stylesheet" href="style.css" />

This solution also applied to the .js file.

Answer №3

It's important to update your if condition so that it makes sense when performing actions on a non-existent webview.

if (webView != nil) {
    self.loadView()
    self.webView.navigationDelegate = self
} else {
    // Handle the scenario where webView is nil
}

if (self.finishedUrl != myUrl.absoluteString) {
    webView.load(request as URLRequest)
}

Answer №4

Encountering a similar issue, I found that my styles.css file was only referenced in the .HTML files and loaded perfectly when opened directly in a browser.

The root cause of the problem was that my styles.css was not included in any of my Targets. Once I ticked the box to include it, everything worked smoothly.

https://i.sstatic.net/FhKX6.png

Answer №5

After encountering the same problem, I was able to find a solution by categorizing the resources under "Create folder instance" instead of using "Create groups".

The issue with using Create groups is that it indexes the file but removes its path. This means that you need to call the file by its filename (ensuring each filename is unique within the group). On the other hand, Create folder instance retains the folder structure.

Read more at Create groups vs Create folder reference in Xcode

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for calculating and determining the exact area the div should be released?

I am currently developing a drag-and-drop application using only Javascript. I have successfully implemented the dragging functionality, allowing elements to be moved randomly within the page. However, I now face the challenge of creating a drop zone with ...

javascripthtmlcssdrag-and-drop

Application for communication between servers

For my upcoming project, I am looking to create a live chat feature that includes: a group chat room private user-to-user chat a website interface a mobile interface additional information such as user profiles ...

phpandroidioslivechat

Imitate the pressing of the "Go" and "Next" buttons on the onscreen keyboard of an iOS device for testing in Xcode

Currently working on writing unit tests that involve using XCUIApplication. We are focusing on an accessibility test to verify that clicking the "Go" button on the virtual keyboard logs a user in if they provide a valid username and password. I am aware ...

iosxcode

"Effortlessly position a tooltip div at the top and conceal it with ease

I need assistance with the code snippet found at http://jsfiddle.net/VmXU9/34/. $(".click").click(function() { var s = $(this).offset(); left = s.left + $(this).width(); $("#THREE").css({ 'opacity': 0.80 }); $("#THR ...

javascriptjqueryhtmlcss

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

htmlcssbootstrap-4

Varying Heights on Different Pages

I have encountered a styling issue while using md-card in my application. The problem arises when I also include md-autocomplete in the home page, requiring me to modify the angular-material.css for proper display. However, on the product page where I uti ...

htmlcssangularjs

Variable in SCSS not being applied as expected

I'm currently grappling with understanding why my alterations to the system colors aren't reflecting as expected. When viewing in Chrome, this is the image I see. https://i.sstatic.net/H6YbW.png However, this is what I anticipate should be vis ...

htmlcssangularsass

Ways to display an image overlay on hover using sprite sheets

Is there a way to make a line appear, around 10px in size, when hovering over an image at the bottom of that image? I came across this effect on MTV's website within their "You would also like these" section below each post. They utilized css-backgro ...

htmlcsscss-sprites

Creating an accessible order for the next and back buttons

Currently, I am working on designing the user interface for a checkout flow. Towards the end of the page, there are 3 buttons available - Next, Back, and Cancel. When viewed on a desktop, the button layout appears as follows: (Back) (Next) Cancel http ...

htmlcssaccessibility

The color of the button does not change when the jQuery onclick event is triggered

I am facing an issue with my buttons, specifically with Button 2. When Button 2 is clicked, I want the background color to change using an onclick event. However, despite my efforts, I have been unable to achieve this. Whenever I click Button 2, the colo ...

javascriptjqueryhtmlcss

Is it possible to utilize react for constructing a static HTML, CSS, and JavaScript document?

As a front end content developer, my main focus is on creating content assets. I typically use vscode to build my html, css, and js files, and then upload these static files to the content management system. However, this approach doesn't give me the ...

javascripthtmlcssreactjsstatic

Distributing iPad apps internally via the App Store platform

After developing 3 iPad single window applications, I faced rejection in the app store due to organizational ownership. Seeking alternatives to distribute these apps without using ad-hoc distribution, I explored options such as enterprise app development ...

iphoneiosxcodedistribution

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

cssreactjsmaterial-designmaterial-uijss

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

csstwitter-bootstrap

Certain components display with greater height on Internet Explorer

When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...

htmlcssinternet-explorer

Is XOR supported in Core Data predicates?

Is there a way to implement XOR as an operator in a predicate? I am working with a File object and need to determine if there is an English version available. If the English version is not available, I want to retrieve the German version. However, if both ...

objective-cioscore-datanspredicate

What is causing some Font Awesome icons to not function properly with boostrapCDN?

I thought all Font Awesome icons would work by linking this bootstrap stylesheet, but I've only managed to get one of them (`.fa fa-deskto`) to display. The rest, like the second one for example (link below), simply don't show up: Both icons are ...

htmlcssreactjstwitter-bootstrapfont-awesome

Encountering issue with 'Higher minimum deployment target' while trying to install Firebase Crash Reports Pods on iOS devices

While trying to set up the Firebase Crash Reporting Pod for iOS, I encountered an issue. The main Firebase Pod installs without any problems, but when it comes to installing Crash Reporting, I receive an error message in the terminal: I found specificatio ...

iosfirebasefirebase-crash-reporting

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml