Troubleshooting strange behavior with Silex and Twig CSS caching issues

I'm facing a frustrating issue where changes I make in my CSS file are not reloading properly.

The style.css file in PhpStorm appears as:

body {
  background-color: blue;
}

However, when viewed in Chrome it shows:

body {
  background-color: green;
}

What's strange is that if I update style.css to "foo bar testing,"

Chrome displays it as:

body {
  backgrou

In addition, dumping a lot of random text into style.css results in Chrome displaying:

body {
  background-color: green;
}
...etc

So Chrome seems to recognize the changes but somehow sticks with the original content.

The Twig options I have configured are:

$app['twig.options'] = array('cache' => false, 'auto_reload' => true);

I've also attempted adding ?{{ random() }} to style.css to force a reload, but it hasn't worked.

Answer №1

It appears that the problem lies in using Nginx within VirtualBox.

To resolve this, set sendfile to off in /etc/nginx/nginx.conf

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

Is it possible for a "position:absolute" div to maintain its relative width?

Imagine having two nested divs like the following: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body> </html> Currently, the i ...

Elevate the size of the hero section

Is there a way to increase the height of my jumbotron without adding it in the class attribute, as it would affect responsiveness? I want it to look like this, but currently, it appears as this. Below is my code: Html: <div class="container"> ...

Tips for making sure a header is consistently at the top of every page during printing

I need help with my website - I have a table that is quite tall and spans across multiple pages when printing. Is there a way to make the header row appear on top of each page when printing? ...

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

Tips for stopping the web page from moving due to scrollbar placement?

On my website, I have DIVs that are center-aligned. However, some pages require scrolling while others don't. Whenever I switch between these two types of pages, the appearance of a scrollbar causes the page to move slightly to the side. Is there a wa ...

Interval function not initiating properly post bullet navigation activation

Currently, I am experiencing an issue with my custom slider where the auto sliding set interval function is not working after using the bullet navigation. Despite trying to implement "setTimeout(autoSlide, 1000);", it doesn't seem to be resolving the ...

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...

Why is my CSS and Bootstrap full-page image not displaying properly?

I've been struggling to get a full-page image to display on my website and resize responsively across different screens. I've searched through w3schools and Stack Overflow for solutions, but no matter what I try, it just doesn't seem to work ...

When using React <p> and Tailwind, the text overflow occurs in either the X or Y axis, despite specifying Y specifically

I am building a React frontend using TailwindCSS 2.2, and I have these two texts inside a <p> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ...

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

Modify vanilla JavaScript carousel for compatibility with Internet Explorer

I am currently in the process of creating a website that incorporates a carousel similar to the one found at the following link: https://codepen.io/queflojera/pen/RwwLbEY?editors=1010 At the moment, the carousel functions smoothly on opera, chrome, edge ...

What is the method for integrating an element into a different flow using the position property?

How can I solve the following issue: I am working with a carousel markup that has the same HTML structure as shown below. <div> // Contains the carousel slide <div> <ul> <li><img src={....} /></li> <li ...

List with pulldown options

I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...

Decrease the heaviness of a Glyphicon

How can I make Glyphicons appear lighter in weight? I have utilized the "ok" Glyphicon <span class="glyphicon glyphicon-ok"></span> which currently displays as follows: Is there a method to decrease the weight of the icon in order to create a ...

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

I'm facing challenges with setting auto heights on CSS and aligning floating divs

I'm trying to create a simple tiled list with six smaller divs inside a main div, all set to float:left. However, this is causing issues with the auto height and it doesn't seem to work properly within the div. Can anyone help me fix my code or s ...

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

I attempted to create a login form on an HTML page using Angular, featuring a full-size background image that is centered. The form itself is contained within a div with a blurred background, also centered both horizontally and vertically within the browse ...