[Django] #32671: CSS var() causes relative URLs to break in Safari

[Django]

#32671: CSS var() causes relative URLs to break in Safari
-----------------------------------------+------------------------
Reporter: Perry Roper | Owner: nobody
Type: Uncategorized | Status: new
Component: contrib.admin | Version: 3.2
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 1
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-----------------------------------------+------------------------
There is a bug in Safari where using the var() property alongside a url()
that contains a relative path, the relative path will break. The bug also
existed in Chrome
(https://bugs.chromium.org/p/chromium/issues/detail?id=618165), which has
been fixed. However the Safari bug still exists as of Mac OS 11.2.3.

**Expected Output**

[[Image(https://i.imgur.com/r6rQuO6.png)]]

**Actual Output**

[[Image(https://i.imgur.com/eVqLZbP.png)]]
[[Image(https://i.imgur.com/Tj3f0O4.png)]]

As you can see from the console, the URLs end up being relative to the
**current page URL**, not the CSS file URL in which they are loaded.

This bug was introduced in
https://github.com/django/django/commit/0a802233ec1421e5e59a486be69daef9b112fd0d

--
Ticket URL: <https://code.djangoproject.com/ticket/32671>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#32671: CSS var() causes relative URLs to break in Safari

-------------------------------+---------------------------------------
Reporter: Perry Roper | Owner: Perry Roper
Type: Uncategorized | Status: assigned
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------+---------------------------------------
Changes (by Perry Roper):

* owner: nobody => Perry Roper
* status: new => assigned

Old description:

> There is a bug in Safari where using the var() property alongside a url()
> that contains a relative path, the relative path will break. The bug also
> existed in Chrome
> (https://bugs.chromium.org/p/chromium/issues/detail?id=618165), which has
> been fixed. However the Safari bug still exists as of Mac OS 11.2.3.
>
> **Expected Output**
>
> [[Image(https://i.imgur.com/r6rQuO6.png)]]
>
> **Actual Output**
>
> [[Image(https://i.imgur.com/eVqLZbP.png)]]
> [[Image(https://i.imgur.com/Tj3f0O4.png)]]
>
> As you can see from the console, the URLs end up being relative to the
> **current page URL**, not the CSS file URL in which they are loaded.
>
> This bug was introduced in
> https://github.com/django/django/commit/0a802233ec1421e5e59a486be69daef9b112fd0d

New description:

There is a bug in Safari where using the var() property alongside a url()
that contains a relative path, the relative path will break. The bug also
existed in Chrome
(https://bugs.chromium.org/p/chromium/issues/detail?id=618165), which has
been fixed. However the Safari bug still exists as of Mac OS 11.2.3.

**Expected Output**

[[Image(https://i.imgur.com/r6rQuO6.png)]]

**Actual Output**

[[Image(https://i.imgur.com/eVqLZbP.png)]]
[[Image(https://i.imgur.com/Tj3f0O4.png)]]

As you can see from the console, the URLs end up being relative to the
**current page URL**, not the CSS file URL in which they are loaded.

This bug was introduced in
https://github.com/django/django/commit/0a802233ec1421e5e59a486be69daef9b112fd0d

GitHub Pull Request: https://github.com/django/django/pull/14294

--

--
Ticket URL: <https://code.djangoproject.com/ticket/32671#comment:1>

[Django]

#32671: CSS var() causes relative URLs to break in Safari

-------------------------------+---------------------------------------
Reporter: Perry Roper | Owner: Perry Roper

Type: Uncategorized | Status: closed
Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution: wontfix

Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------+---------------------------------------
Changes (by Carlton Gibson):

* status: assigned => closed
* resolution: => wontfix

Comment:

Using the fiddle from the Chromium issue linked:
https://jsfiddle.net/cgalvist/emmcbwzn/15/

This is fixed in the macOS 11.3 beta, with Safari Version 14.1
(16611.1.21.161.3).

As such I'm not sure this is worth working around for us. Let's just wait
for the fix to ship.

--
Ticket URL: <https://code.djangoproject.com/ticket/32671#comment:2>

[Django]

#32671: CSS var() causes relative URLs to break in Safari

-------------------------------+---------------------------------------
Reporter: Perry Roper | Owner: Perry Roper
Type: Uncategorized | Status: closed

Component: contrib.admin | Version: 3.2
Severity: Normal | Resolution: wontfix

Keywords: | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------+---------------------------------------

Comment (by Carlton Gibson):

For reference here is the WebKit issue showing it as resolved.
https://bugs.webkit.org/show_bug.cgi?id=198512

--
Ticket URL: <https://code.djangoproject.com/ticket/32671#comment:3>