1

I see on MDN that relative URLs are relative to the css file, not to the current page. I want to understand if there any exceptions or gotchas with using relative urls in CSS, as I can see in my access logs that some requests are using the wrong relative path.

Previous threads on here suggest there might be issues with old IE versions, but that doesn't seem to be what is causing this as the user agents here are modern.

The particularly annoying thing is that this doesn't affect all requests and I'm unable to reproduce the problem myself. I could just replace all the relative urls in my css with absolute and continue with my life but I want to understand what is causing this and discover if there is a better solution.

CSS file is loaded like <link rel="stylesheet" type="text/css" href="/static/css/common.min.css?v6" /> and in this I have relative urls to images defined , e.g. #go, #search_go {background: #EEE url(../img/silk/magnifier.png) no-repeat .4em .25em; padding-left: 1.8em;}

The CSS is minified using UglifyCSS but using Inspect element in my browser makes me think this is not the issue (also, of course it does work in the majority of requests).

An example of a bad request looks like

ip.ip.ip.ip - - [09/Jan/2022:20:22:20 +0000] "GET /foo/img/silk/magnifier.png HTTP/2.0" 404 1575 "https://example.com/foo/search/" "Mozilla/5.0 (Android 11; Mobile; rv:95.0) Gecko/95.0 Firefox/95.0"

An example of a 'good' request looks like

ip.ip.ip.ip - - [09/Jan/2022:21:07:32 +0000] "GET /static/img/silk/magnifier.png HTTP/2.0" 200 615 "https://example.com/foo/search/" "Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Mobile/15E148 Safari/604.1"

To note this is not just affecting a single browser, some other user agents which show up in the access logs with "bad" requests are

"Mozilla/5.0 (Android 11; Mobile; rv:95.0) Gecko/95.0 Firefox/95.0"
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:95.0) Gecko/20100101 Firefox/95.0"
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"```
aland
  • 1,824
  • 2
  • 26
  • 43
  • 1
    It depends on what you mean by "*some requests are using the wrong relative path*", but `url()` within a stylesheet is **always** relative to the stylesheet itself. The choice of browser has no impact on this. Your 'good' request should be the one that all visitors are directed to, according to your code. – Obsidian Age Jan 10 '22 at 00:38
  • I don't have any more information to elaborate on the "some requests.." part, I can see in the access logs it happens but don't see any pattern (e.g. browser agent, referrer..) to narrow down the root cause. It is good to know that browser choice has no impact. I am at a bit of a loss as to what else to try, hence asking the question here. – aland Jan 10 '22 at 09:41
  • 1
    I found this issue recently with users running the DarkReader extension - see https://github.com/darkreader/darkreader/issues/1933. Worth doing a survey of the users if you can and see if they have this in common! – Mintra May 12 '23 at 09:31

0 Answers0